Claude

Use democrito with Claude

Attach three files, describe your brand, and let Claude generate a new theme. No terminal, no local setup — the entire workflow runs in the browser.

Inspect context files

Claude can fetch the content of any public URL — but the GitHub page at github.com/mmorerasanchez/democrito returns HTML, not file contents. Claude can parse it, but it won't extract the files you need. The raw content URLs at raw.githubusercontent.com return plain text that Claude reads immediately and completely.

For democrito, these are the three raw URLs that carry everything Claude needs:

bash

https://raw.githubusercontent.com/mmorerasanchez/democrito/main/CLAUDE.md
https://raw.githubusercontent.com/mmorerasanchez/democrito/main/DESIGN.md
https://raw.githubusercontent.com/mmorerasanchez/democrito/main/src/index.css

Paste these URLs (not the GitHub page URL) when sharing context with Claude.ai or Claude Design. If you've forked the repo, replace mmorerasanchez with your GitHub username.

Verify the reasoning, not just the values

Before customizing anything, confirm Claude loaded the reasoning layer — not just the token values. Ask it to explain why the rules exist. A Claude that can explain why font-mono is required on data values will apply that rule correctly when generating code. A Claude that only knows the value won't.

Paste this calibration prompt immediately after sharing the three files:

prompt

From the files you just read:
- Why does font-mono appear on inputs, badges, table data, and KPI values —
  but not on button labels or nav items?
- What is the design philosophy behind using exactly 1 accent color per screen?
- Why does the surface hierarchy stop at 3 levels? What would a 4th surface create?

Install the context in your project

design-tokens.json

W3C DTCG format. Gives Claude every token name, its value in all three themes, and the hierarchical structure so it can reason about changes without reading CSS.

src/index.css

The live token source. Contains the @theme block, all three theme overrides, and keyframe definitions — needed when Claude is asked to write or verify CSS output.

CLAUDE.md

Agent coding rules, atomic design architecture, naming conventions, and verification commands. Scopes Claude to on-system patterns from the first message.

Files to add to Project knowledge

Add CLAUDE.md, DESIGN.md, and design-tokens.json to the Project files. For the deepest context, also add the docs/ folder — it contains the theming guide, token reference, and component rules as separate readable documents.

Customize with your brand

Use this pattern when asking Claude to generate a new theme. Attach the two CSS files first, then describe your brand direction.

prompt

I'm building [product]. Attach design-tokens.json and src/index.css.
Please generate a new theme with [brand direction].
Preserve the 3-surface hierarchy and the monochromatic principle.
Output only the changed CSS custom property values.

Play with your taste

Concrete, specific prompts produce precise output. Name the token you want to change, give the direction, and constrain what must stay the same.

prompt

Change the accent to electric blue, keep the warm theme earth tones,
increase border radius to 0.75rem

Shift only the accent and keep everything else intact:

prompt

Shift the accent from terracotta to forest green.
Keep the 3-surface hierarchy, monochromatic grays, and font roles unchanged.
Output only the CSS custom property values that change.

Explore contrast and density:

prompt

Increase visual contrast: darken the muted-foreground token,
raise border opacity, and tighten spacing on the card surface.
Stay within the warm theme — no hue changes.

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