Store Designer

The colossal-store-design skill is the bridge between the Design Library and a real project. It does two things:

Apply — take an existing reference and apply its design (colors, fonts, radii, sections, component props) to any project, translating to match the project’s stack.
Create — analyze one or more store screenshots with Gemini and produce a new design.json + theme.css into the design library.

This skill is generic. It does not assume the target project uses any specific template — it adapts to whatever stack the project is built on.

Apply a reference

The agent inspects the project’s stack first, then picks one of these paths:

Project type	Path
shadcn / shadcn-compatible CSS variables	Drop the reference’s `:root {}` block into the project’s global CSS
Tailwind without shadcn	Map CSS variables onto `tailwind.config.{js,ts}`
Pure HTML + CSS	Keep `:root {}`, drop `@theme inline {}`, use Google Fonts CDN
Vue / Svelte / Astro / other	Adapt to the project’s idiom — use the principle, not the literal CSS

For every path, the agent treats sections[] as a menu of ideas, not a checklist — only the sections the user actually asked for get applied. The reference’s header.*, footer.*, and productCard.* props target the Colossal UI library specifically and are skipped for non-Colossal projects.

Create a reference

# Single screenshot
bash scripts/analyze.sh ~/Desktop/store.jpg bold-comfort-basics

# Multiple screenshots, combined into one reference
bash scripts/analyze.sh ~/Desktop/page1.jpg ~/Desktop/page2.jpg soft-luxe-beauty

Output goes to ../colossal-design-library/references/<slug>/. Slugs must be generic — no actual store names. Use descriptors like dark-luxury-fashion or minimal-coffee-earth. The script Base64-encodes the image(s), sends them to Gemini with the analysis prompt, validates the response, strips any hallucinated header/footer link arrays, and runs gen-theme.cjs to produce the theme.css. Requires GEMINI_API_KEY, plus jq, node, and curl.

Scripts

File	Purpose
`scripts/analyze.sh`	Analyze screenshot(s) into the design library (Create)
`scripts/gen-theme.cjs`	Convert a `design.json` theme object into a self-contained `theme.css` (also runnable standalone)
`scripts/prompt.txt`	The Gemini analysis prompt — edit to change extraction behavior

Install

npx skills add colossalhq/agent-skills \
  --skill colossal-store-design \
  --skill colossal-design-library

The store-design skill writes into colossal-design-library. If you install it without the library, set COLOSSAL_DESIGN_LIBRARY_DIR to point at an existing library skill directory.

Get started

Platform

Agents

Automations

Storefront

Dev Tools

Apply a reference

Create a reference

Scripts

Install

​Apply a reference

​Create a reference

​Scripts

​Install

Apply a reference

Create a reference

Scripts

Install