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.
/linear-style-ui Design a dark SaaS landing page for my API monitoring tool
What you get
- SKILL.md — the Linear-style dark SaaS design system: when to use it, page assembly order, IP guardrails
- references/design-tokens.md — exact color, typography (Inter 510/590 ladder), spacing and radius tokens
- references/components.md — build specs for nav, hero, feature grid, keyboard section, product mock, CTA and footer
- references/snippets.md — copy-paste code: buttons, kbd chips, nav, hero, feature cards, hand-built product mock, reveal
- examples/landing-page.html — a complete demo page (Drift deployment platform) with hand-built CSS/SVG product visuals
Good fit
- Dark-first SaaS landing pages and developer-tool marketing sites
- Feature and changelog pages with a premium technical aesthetic
- Dashboards where density and restraint matter more than decoration
Not for
- Light marketing pages or playful consumer products
- Content-heavy editorial sites
- Projects needing a multi-color brand system — this language uses one indigo only
- Name
- Linear-Style UI Design
- Downloads
- 0
- Category
- Design
- Skills inside
- 1
Download & install
What's new: Initial release — SKILL.md, design tokens, components, code snippets, and a complete demo landing page (Drift deployment intelligence) with hand-built CSS/SVG product mock.
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 linear-style-ui-v1.0.0.zip -d ~/.claude/skills/linear-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
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.
archify
tt-a1i/archify
Agent skill for beautiful, verifiable architecture, workflow, sequence, data-flow, and lifecycle diagrams.