Fintech-grade marketing pages in a gradient-mesh language — luminous white canvas, animated warm-to-cool gradient hero band, thin 300-weight display type with tight tracking, one indigo action color, near-square geometry, deep-navy dashboard mocks. Build fintech landing pages, pricing pages, and API/developer marketing with financial-infrastructure polish.
Build a fintech landing page with an animated gradient mesh hero and a dark dashboard mock using stripe-style-ui.
What you get
- SKILL.md with full workflow + IP guardrails, design-tokens reference (colors, type ladder, radius, shadows, breakpoints), components reference (nav, mesh hero, dashboard mock, tiles, stat band, pricing), copy-paste snippets, and 2 demo pages (landing-page.html, pricing.html).
Good fit
- Fintech landing pages and pricing pages; API and developer-platform marketing; onboarding flows; product dashboards where trust and engineered polish matter.
Not for
- Dark-first dev-tool sites; premium consumer product marketing; playful or cartoonish brands; content-heavy editorial sites.
- Name
- Stripe-Style UI Design
- Downloads
- 1
- Category
- Design
- Skills inside
- 1
Download & install
What's new: v1.0.0 — Initial release: SKILL.md + 3 reference files (design-tokens, components, snippets) + 2 demo pages (landing-page.html, pricing.html) built for fictional brand Paydrift. All visuals are hand-built CSS/SVG; no real brands or trademarks.
Free for signed-in users.
1. Download the ZIP
Use the button above to download the packaged skill. It contains the SKILL.md plus all supporting files.
2. Unzip into your agent's skills folder
Extract the archive so that SKILL.md sits directly inside a folder named after the skill:
unzip stripe-style-ui-v1.0.0.zip -d ~/.claude/skills/stripe-style-ui/Skills folder per agent
- Claude Code
- ~/.claude/skills
- Cursor
- ~/.cursor/skills
- Codex
- ~/.codex/skills
- GitHub Copilot
- ~/.copilot/skills
3. Restart your agent
Your agent picks up the new skill automatically on next launch. Ask it what it can do.
Reviews
Related skills
Linear-Style UI Design
Linear-Style UI Design
Design dark, developer-grade SaaS pages in Linear's visual language — near-black canvas, Inter with signature 510 weight, hairline white borders, indigo accent, keyboard-first product storytelling.
Claude Code · Codex · Cursor · Copilot +3
Apple-Style UI Design
Apple-Style UI Design
Design web pages in Apple's marketing-site visual language — gallery-like product storytelling, the SF type ramp, binary light/dark panels, and one blue reserved for action.
Claude Code · Codex · Cursor · Copilot +3
Vercel-Style UI Design
Vercel-Style UI Design
Teach your AI agent to design like Vercel: monochrome palette, oversized tight typography, hairline borders, subtle gradient glows and grid textures. Ships with design tokens, copy-paste components, and a complete example landing page.
Claude Code · Codex · Cursor · Copilot +1
taste-skill
Leonxlnx/taste-skill
Taste-Skill - gives your AI good taste. Stops the AI from generating boring, generic slop.