skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-cursor

Apply Cursor's design system tokens, typography, and components when generating UI.

Updated Feb 23, 2026
Search Tags:#typography#design system#css#design tokens#cursor#ui generation#brand styling
One-click install
npx skills add https://github.com/deepparser/skills --skill design-cursor-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-cursor
Source: https://github.com/deepparser/skills/tree/main/design-cursor
Command: npx skills add https://github.com/deepparser/skills --skill design-cursor-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Cursor's visual identity requires exact design tokens—warm cream backgrounds, oklab borders, compressed gothic typography—that are hard to reproduce from memory. This Skill provides the complete design system specification so generated UI matches Cursor's look precisely. ## Core Features & Use Cases - Complete Design Tokens: Exact color palette (warm cream #f2f1ed, near-black #26251e, accent orange #f54e00), surface scale, oklab border values, and shadow definitions. - Typography System: Three-font hierarchy (CursorGothic display, jjannon serif body, berkeleyMono code) with size, weight, line-height, and letter-spacing rules for every role. - Component Specifications: Buttons, cards, forms, navigation, pill tags, and the signature AI timeline with semantic colors for thinking, grep, read, and edit states. - Use Case: When asked to build a landing page or dashboard styled like Cursor, the Skill supplies exact CSS values, spacing scales, and interaction states, plus light and dark HTML previews for visual verification. ## Quick Start Build a landing page styled like Cursor with a hero section, feature cards, and pill-shaped tags using this design system.

Frequently Asked Questions about design-cursor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a website look like Cursor's design?▼

Use Cursor's design tokens: warm cream background #f2f1ed, near-black text #26251e, and accent orange #f54e00. Apply CursorGothic-style headings with negative letter-spacing (-2.16px at 72px) and serif body text for editorial passages.

What fonts does the Cursor website use?▼

Cursor uses three typefaces: CursorGothic for display and UI headings, jjannon serif for body and editorial text, and berkeleyMono for code. The system falls back to system-ui, Georgia, and standard monospace stacks when custom fonts are unavailable.

Does this design system support dark mode?▼

Yes, the Skill includes a dark theme preview (preview-dark.html) with inverted warm tones—dark warm background #1a1915, light text #e6e5e0—and adjusted semantic colors for error, success, and AI timeline states.

What are oklab borders and why does Cursor use them?▼

Cursor defines borders in the oklab color space, such as oklab(0.263084 -0.00230259 0.0124794 / 0.1), which keeps warm brown borders perceptually consistent across backgrounds. The Skill also provides rgba(38, 37, 30, alpha) as a CSS-compatible fallback.

What colors represent AI operations in Cursor's interface?▼

Cursor's AI timeline uses four semantic colors: peach #dfa88f for thinking, sage green #9fc9a2 for grep/search, soft blue #9fbbe0 for file reading, and lavender #c0a8dd for editing operations.

Related Skills

Explore More Design & Creative Skills→
lucaspedrozaemlucaspedrozaem
1

ui-design

Translate wireframes and requirements into token-level UI specifications for SaaS products.

Community
Intermediate
FnSK4R17sFnSK4R17s
1

web-design-guidelines

Audit UI code for Web Interface Guidelines compliance and report violations.

Community
Intermediate
Javeria-JavaidJaveria-Javaid

ui-visual-validator

Validates UI modifications through visual evidence, design system compliance, and accessibility checks.

Community
Intermediate
timchaptimchap

popular-web-designs

Generates HTML/CSS pages styled after 54 real brand design systems.

Community
Intermediate