> ## Documentation Index
> Fetch the complete documentation index at: https://docs.colossal.sh/llms.txt
> Use this file to discover all available pages before exploring further.

# Store Designer

> Apply existing references from the Design Library to any project, or create new references from store screenshots. Drops in for shadcn projects; translates to Tailwind, vanilla CSS, Vue, or Svelte for everything else.

The `colossal-store-design` skill is the bridge between the [Design Library](/agent-skills/colossal-design-library) and a real project. It does two things:

1. **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.
2. **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

```bash theme={null}
# 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

```bash theme={null}
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.