Frontend & UI
design-skills · Terracotta
Clay accent on cream, DM Serif Display headlines, long-form reading.
What it is
A guideline skill for a sun-baked editorial interface: cream #F3E9D8 surfaces, one terracotta #C56A3C accent, DM Serif Display headlines, JetBrains Mono. Tuned for blogs and storytelling.
A sun-baked, clay-toned editorial interface built on warm cream surfaces, ink-brown headlines set in a display serif, and a single terracotta accent.
Why it matters for design
- One accent color only, so emphasis stays scarce and headlines carry the hierarchy.
- Warm cream surfaces cut glare in long articles compared with pure white pages.
- Display serif headlines over ink-brown body text set a clear editorial rhythm.
What it covers
- Brand
- Style foundations
- Rules: do
- Rules: don’t
- Component rule expectations
- Quality gates
How to install
design-skills · Terracotta
-
Clone the repo.
git clone https://github.com/bergside/awesome-design-skills -
Point Codex at the skill file.
skills/terracotta/SKILL.md -
Then describe the UI you want. Codex follows the skill.
How to run it with Codex
-
Point Codex at the terracotta and cream tokens before it writes any component.
-
Ask for anatomy, variants, and states per component, with spacing tokens named explicitly.
-
Request anti-patterns and migration notes when retrofitting existing inconsistent UI.
Every plugin here is free, open source, and links to its real upstream source.
More on the codex-design list ↗More Codex design plugins
Frontend & UI What it does gpt-taste Builds award-style landing pages with GSAP scroll motion and gapless bento grids. 
Design Systems What it does Stitch Design Taste Writes a DESIGN.md that steers Google Stitch toward non-generic screens. 
Frontend & UI What it does image-to-code Generates design images first, analyzes them, then builds matching frontend code. 
Frontend & UI What it does imagegen-frontend-mobile Generates premium mobile app screen flows as images, not code. Next step
Design with Open Design, without the setup
Install this plugin yourself, or run a whole curated design layer around Codex with Open Design. Bring your own key, own your output.