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

design-replicate

Apply Replicate's design system tokens and component styles to UI generation.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Replicate's visual identity requires exact design tokens, typography specs, and component rules that are tedious to reverse-engineer manually. ## Core Features & Use Cases - Complete Design Token Catalog: Provides exact colors (#ea2804 brand red, #202020 dark), typography scales (rb-freigeist-neue display, basier-square body, JetBrains Mono code), and spacing values. - Component Specifications: Defines pill-shaped (9999px) buttons, cards, status badges, dotted-underline links, and gradient hero sections with do's and don'ts. - Light & Dark Previews: Bundled HTML previews show the design system implemented in both themes for visual verification. - Use Case: When asked to build a landing page styled like Replicate, generate a hero with the orange-red-magenta gradient, 72px heavy display type, and pill-shaped CTAs without guessing values. ## Quick Start Create a landing page for an AI model marketplace using Replicate's design system with a gradient hero and pill-shaped buttons.

Frequently Asked Questions about design-replicate

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

FAQPage Schema
How do I build a UI that looks like Replicate's website?▼

Use the design tokens defined in this skill: Replicate Dark (#202020) for text, Replicate Red (#ea2804) for accents, pill-shaped 9999px radius on all elements, and heavy display typography at 48px or larger. The bundled HTML previews show full implementations.

What fonts does the Replicate design system use?▼

Replicate uses rb-freigeist-neue for display headlines at weight 700, basier-square for body text at weights 400-600, and JetBrains Mono for code snippets. System font fallbacks are specified for each family.

Does this skill include a dark theme version?▼

Yes, the skill bundles both preview.html for the light theme and preview-dark.html for the dark theme. The dark version uses #202020 page backgrounds with adjusted card, border, and text colors.

What border radius should Replicate-style components use?▼

Every component uses exactly 9999px pill radius, including buttons, cards, images, badges, and containers. No other border radius value exists in the system.

When should I not use the Replicate red color?▼

Do not use Replicate Red (#ea2804) as a surface or background color. It is reserved for the hero gradient, accent borders on featured items, and high-signal emphasis moments only.

Related Skills

Explore More Design & Creative Skills→
akornmeierakornmeier

ui-cloner-brand-interview

Collect brand and user details through a structured 12-question interview.

Community
Basic
devCharuzudevCharuzu

code-to-prd

Extracts routes, models, APIs and UI interactions from a codebase to generate a structured PRD.

Community
Advanced
spencerpaulyspencerpauly
672

dark-mode-testing

Detect dark mode rendering defects by comparing light and dark browser states.

Community
Intermediate
Adham7843Adham7843

ckm:design

Design brand identities, UI elements, and AI-generated mockups.

Community
Advanced