Vibe Coding

Use democrito with Lovable, Replit & Google Stitch

Fork the repo in your vibe-coding tool of choice, paste the relevant prompt block, and describe your visual direction. No repository setup required.

Lovable

Point your Lovable project to the live design system URL and paste this block into Workspace Knowledge or your project prompt. It carries the visual rules without requiring file attachments.

prompt

Use democrito (the design system at https://democrito.design)
for all visual decisions. Key rules:
- 3 fonts: Plus Jakarta Sans (font-display) for titles, Satoshi (font-body)
  for body text, JetBrains Mono (font-mono) for ALL data and code content
- Colors: 95% neutral grays, single accent hue, semantic feedback colors
- 3-surface hierarchy: Background → Surface → Card
- Radix UI / shadcn/ui for all component primitives
- Warm theme is default (`:root`). Support Dark (`.dark`) and Light (`.light`) themes.

To push a specific brand direction:

prompt

Using the democrito design system, adjust the visual to feel more editorial:

- Change accent to deep teal (HSL 182° 83% 25%)

- Increase border radius on cards and inputs to 0.75rem

- Keep the 3-surface hierarchy and font roles unchanged

Output only the CSS custom property values that change.

Google Stitch

DESIGN.md is Google's open-source format for encoding design systems as agent-readable plain text — democrito's DESIGN.md follows this format exactly. Stitch reads it natively as project context: import it once and every screen Stitch generates applies democrito's visual rules without you specifying them per prompt. Important: Stitch's export uses generic Tailwind classes. The visual output will be correct; the code always needs a token mapping pass.

Step 1 — Import DESIGN.md

Point Stitch at the raw GitHub URL for DESIGN.md. If you've customized democrito for a brand, use your fork's URL — not the upstream default.

bash

https://raw.githubusercontent.com/mmorerasanchez/democrito/main/DESIGN.md

If you've forked and customized:

bash

https://raw.githubusercontent.com/[your-username]/democrito/main/DESIGN.md

Step 2 — Verify the import

Before generating anything, confirm Stitch loaded the reasoning layer:

prompt

What is the accent color in this design system, its HSL value, and its usage rule?

Step 3 — Generate with token language

Use token names in your prompts, not visual descriptions. Reference list descriptions resolve aesthetic ambiguity that token language doesn't cover — include both.

prompt

Design a data table layout for a log viewer.
IDE-grade, not consumer-grade. Dense and purposeful.
Closer to Linear or Raycast than to Stripe or Notion.

- Table container: bg-surface
- Table headers: font-mono text-xs uppercase tracking-widest text-muted-foreground
- Table cells: font-mono text-sm text-foreground
- Row hover: bg-accent-subtle
- Horizontal dividers only — no vertical column lines
- Selected row: bg-accent-subtle border-l-2 border-accent

Replit

Distilled for Replit's shorter prompt format. Paste into replit.md under a Design system section or include directly in your first prompt.

prompt

Design system: monochromatic neutral grays with a single accent color.
3-surface hierarchy: Background → Surface → Card (never a 4th level).
Font roles: font-display for headings and buttons, font-body for prose,
font-mono for ALL data values, inputs, and user-editable content.
Copy uses sentence case throughout.
No decorative colors. Every color has a specific semantic function.

To customize the design specifications with natural language:

prompt

Using the design system rules above, adjust the visual to feel warmer:

increase heading weight to 700, add 0.5rem more spacing between sections,

and use a slightly more saturated surface background.

Keep all token names — only describe the change direction.

Other vibe coding platforms

Any vibe-coding tool can use the live democrito.design showcase as a visual reference without file attachments. Include the URL directly in your prompt — most tools will fetch and parse the page on their own.

prompt

Match the visual style at https://democrito.design — clean,
data-dense, monochromatic with a single accent color.

Lovable, Stitch, and Replit all generate code with generic Tailwind utility classes — bg-neutral-900, text-orange-500 — not democrito's semantic tokens. The visual output will look correct in the preview. The code always needs a mapping pass before it enters your project.

Skip it and every component that gets edited or regenerated later will revert to generic values, breaking the semantic layer progressively. Apply this find/replace to every generation before committing:

bash

Replace in generated code:

bg-neutral-*      → bg-background / bg-surface / bg-card  (match by visual depth)
border-neutral-*  → border-border
text-neutral-*    → text-foreground / text-muted-foreground
text-white        → text-foreground
text-orange-*     → text-accent
bg-orange-*       → bg-accent or bg-accent/10
font-sans         → font-display (headings) or font-body (prose)
font-mono         → font-mono (keep — already correct)

Flag any remaining hardcoded hex or rgb values.

Contact

Questions, collaborations, or feedback on democrito — reach out on LinkedIn or via hola@atomic-products.com.

Made with ❤️ from 🇪🇸 by Mariano · github.com/mmorerasanchez/democrito