Figma in, a finished website out

The flow

Small skills, each with one job and a clear finish line. The person types the user-invoked ones in order; the rule skills load themselves when the work needs them.

1. /creogen-setupFrames, locales, nav breakpoint, fonts, collections, staging that can’t be indexed.
2. /creogen-grillEvery unanswered question in the Figma file, asked in rounds, each with a recommended answer.
3. /creogen-planSections split, every element mapped to a component, every piece of content given a home. No code.
4. /creogen-buildOne tracer section end to end, then easy sections, then hard ones. Each one red against Figma, then green.
5. /creogen-reviewTwo reviewers in parallel: one checks the framework rules, the other checks Figma and the plan.
6. /creogen-shipQA per page, client markups, pre-launch, go live, two weeks of watching.
7. /creogen-retroWhat hurt becomes a better rule, recipe, gate or deletion.

Never reinvent the wheel

For every section and element, climb from the bottom and stop at the first rung that works. The dashed rungs need a human’s approval before anything is built.

1. Use a recipeA saved section such as cta-band or faq-sticky-left. Fill its data.
2. Compose existing componentsSection, ContentWrap, Layout, Grid, Card. Save it as a recipe if it will appear again.
3. Set a propSame component, different value.
4. Pick a variantSame component, different look or layout.
5. Propose a variantAt least 70% of the structure shared, same purpose.
6. Propose a propThe difference is content or an editor’s on/off choice.
7. Propose a new componentLast resort: name, purpose, props, variants, and why nothing else fits.

Every piece of content has one home

Fluid rules, exact at every frame

Each token gets one value per Figma frame. The compiler draws a straight line between neighbouring frames and writes one clamp() per segment, so the size is exactly what the designer drew at every frame and never jumps in between.

"h1": { "mobile": 32, "tablet": 48, "laptop": 64, "desktop": 64 }

:root { --text-h1: clamp(2rem, 1.0458rem + 4.0712vw, 3rem); }                     /* 375 → 768 */
@media (width >= 48em) { :root { --text-h1: clamp(3rem, -0.4286rem + 7.1429vw, 4rem); } } /* 768 → 992 */
@media (width >= 62em) { :root { --text-h1: 4rem; } }                                 /* 992 and up */

Defaults for every element

Nothing on a page falls back to the browser, and nothing comes from anywhere but Figma. Every HTML element has a decided default; every value below is read from the Figma master template, with Creogen blue as the brand colour.

Theme modes from Figma

Four modes ship: Light, Dark, Tint and Brand. Every semantic colour is defined in each. The fifth Figma mode, Wireframe, is for wireframing only.

Neutrals are black #0a0d0b and white at fixed opacities (70, 50, 16, 10, 8, 4%), so one token works on any surface. Radius: buttons 8, images 12, cards 16. Container 1280, side padding 20 → 80.

Elements with a decided default

• html
• body
• h1–h6
• p
• a
• strong
• em
• small
• sub, sup
• mark
• code, pre
• ul, ol, li
• dl
• blockquote
• q
• hr
• img
• svg, video, iframe
• figure, figcaption
• table, th, td, caption
• label
• button
• input, select, textarea
• ::placeholder
• autofill
• fieldset, legend
• details, summary
• dialog, ::backdrop
• progress, meter
• [hidden]
• ::selection
• :focus-visible
• :disabled

Everything is a variant

Any difference between two instances of any element is an axis: a named, token-bound setting. The same axis has the same name and values on every component, so a button, a card, a list, a badge, a nav or a form field are all configured the same way. Nothing ever needs one-off CSS.

Try it on any component

Pick a component. The controls stay the same; the ones a component doesn’t use are switched off.

The universal axes

Every layout axis also takes a value per range, so columns: { large: 3, medium: 2, small: 1 } means the same thing on a grid, a list or a footer.

Anatomy of a section

Every band of every page is one Section. Padding lives on the section itself, so there are no spacer elements, and the container answers container queries.

• Themeinherit, light, dark, brand; nests
• Paddingnone, even, small, main, large, page top
• Heightauto or screen (svh)
• Widthsmall, main, full

Look and tag are separate

Figma decides how a heading looks. The page outline decides its level. The build fails on a skipped level or a second h1.

Colour primitives

The raw palette. Neutrals are black and white at fixed opacities, so one token reads correctly on any surface. Components never use these directly; they use the semantic colours below.

• Brand/Primary#3d7ffftemplate #00ff88
• Brand/Primary Hover#2f6be0template #00d873
• Black/100#0a0d0b
• White/100#ffffff
• Black/70#0a0d0b · 70%
• White/70#ffffff · 70%
• Black/50#0a0d0b · 50%
• White/50#ffffff · 50%
• Black/16#0a0d0b · 16%
• White/16#ffffff · 16%
• Black/10#0a0d0b · 10%
• White/10#ffffff · 10%
• Black/08#0a0d0b · 8%
• White/08#ffffff · 8%
• Black/04#0a0d0b · 4%
• White/04#ffffff · 4%
• Accent/Star#ffb800
• Brand/Accent#3d7ffftemplate #00ff88
• Brand/On Primary#0a0d0b
• Neutral/Tint#f4f4f1
• Brand/Primary Subtle#3d7fff · 20%template #00ff88 · 20%

Semantic colours in every mode

48 colours, each defined in all 5 modes. A section picks a mode; every component inside follows. Wireframe is for wireframing only and never ships. Each cell shows the colour on that mode’s own background, with the primitive it points to.

Typography

Schibsted Grotesk Medium for headings, Inter Regular and Medium for text. Sizes have a Desktop and a Mobile value; samples below scale fluidly between the 390 and 1280 frames, so resize the window to see both.

Radius

A scale with a desktop and a mobile value, plus three semantic radii that point at it.

• Scale/None0 → 0
• Scale/XS4 → 4
• Scale/S4 → 8
• Scale/M8 → 12
• Scale/L12 → 16
• Scale/XL16 → 20
• Scale/2XL20 → 24
• Scale/3XL24 → 32
• Scale/Round999 → 999
• Button4 → 8Scale/S
• Image8 → 12Scale/M
• Card12 → 16Scale/L

Spacing and layout

Each bar pair shows the mobile value (light) and the desktop value (solid) in pixels. The scale comes first, then the semantic spacing that points at it.

• Scale/00 → 0
• Scale/44 → 4
• Scale/88 → 8
• Scale/128 → 12
• Scale/1612 → 16
• Scale/2016 → 20
• Scale/2420 → 24
• Scale/3224 → 32
• Scale/4032 → 40
• Scale/4840 → 48
• Scale/5640 → 56
• Scale/6440 → 64
• Scale/8040 → 80
• Scale/9640 → 96
• Scale/11240 → 112
• Button/Padding XScale/2016 → 20
• Button/Padding YScale/128 → 12
• Section/Padding LScale/11240 → 112
• Section/Content GapScale/2420 → 24
• Section/Padding MScale/8040 → 80
• Section/Padding SScale/4840 → 48

Shadows

Three elevation steps, each two layered shadows.

• Shadow/S0px 1px 2px 0px rgba(13,13,20,0.06), 0px 2px 8px 0px rgba(13,13,20,0.06)
• Shadow/M0px 4px 12px 0px rgba(13,13,20,0.08), 0px 12px 32px 0px rgba(13,13,20,0.08)
• Shadow/L0px 8px 24px 0px rgba(13,13,20,0.1), 0px 24px 64px 0px rgba(13,13,20,0.14)

Every breakpoint, every corner

Components respond to the space they actually have, not the screen. Ranges are container queries, desktop first, as the team designs.

Every page is checked at these widths, plus a sweep from 320 to 1920 in steps of 10 px that fails on any sideways scroll. Dark chips are the Figma frames.

• 320
• 360
• 375
• 390
• 414
• 430
• 480
• 540
• 600
• 640
• 720
• 768
• 820
• 834
• 900
• 992
• 1024
• 1080
• 1180
• 1280
• 1366
• 1440
• 1536
• 1680
• 1920
• 2560

Then the corners: phone landscape, foldables, ultra-wide, short screens, 200% and 400% zoom, text spacing overrides, the longest German heading, empty content, touch and keyboard, dark mode, forced colours, reduced motion, print, right-to-left and notches.

Every browser, never broken

The latest two versions of Chrome, Edge, Firefox, Safari on Mac and iOS, Samsung Internet and Chrome on Android, checked on a real iPhone, Android phone and iPad. Newer features sit behind @supports and fall back to a working, static page.

Motion that feels expensive and costs nothing

Only transform, opacity, filter and clip-path move. Content is visible without JavaScript. Everything stops under reduced motion. Press each tile to feel the token.

Loved by Google and by LLMs

Search engines and answer engines reward the same things: fast pages, clean HTML, a stable entity, honest specific content and answers that stand on their own.

• SEO

  Full head per page and locale, canonical, hreflang, sitemaps, robots, redirects for every old URL.

• AEO

  Each key page answers its main question in the first 40 to 60 words, under question-shaped headings.

• GEO

  Specific numbers with sources and dates, comparison tables in real HTML, facts from one source so every page agrees.

• AIO

  One JSON-LD graph per page: organisation, website, page, breadcrumbs and the page’s own type. Nothing important hidden behind scripts.

• pSEO

  Generated pages ship only with real data per row, at least 40% unique content, human review and staged indexing.

• Consent

  No tag before consent, Consent Mode v2 wired, every tag inside the performance budget.

Budgets, checked on every preview

Bars show how much of each lab budget a typical Creogen page uses. Our targets are stricter than Google’s “good” thresholds.

• Largest paint≤ 1.2 s
• Layout shift0.00
• Blocking time≤ 50 ms
• Homepage JS≤ 15 kB
• Homepage weight≤ 500 kB
• Lighthouse100 × 4
• axe violations0

Every call has one of four outcomes

Before acting on anything the rules do not fully settle, the agent sorts the call. When unsure, it takes the stricter row.

1. NeverAnything that touches a live site, published pages, production CMS, DNS, live forms or real customer data. Even reading happens only when asked. The one exception is an explicit instruction in the conversation that names the site and the action.
2. Ask firstOne-way doors: slugs, CMS schema that already holds content, deletions, redirects, published copy, brand or numbers Figma did not specify, and anything that conflicts with a dev note or the plan.
3. Decide and flagReversible and inside the rules, but with no default or precedent. The agent does it, logs it as pending, and lists it at the top of the hand-off.
4. DecideReversible, inside the rules, and covered by a standing call or a logged precedent. The agent does it and notes it.

When rules pull against each other

The higher one always wins. If a higher priority blocks the design, the design changes through a question, never silently.

1. Safety of live sites and client data
2. Accessibility and legalWCAG AA, GDPR, imprint, consent
3. What the designer meantFigma, dev notes, the approved plan
4. Reuse and consistencyReuse ladder, axes, tokens
5. Performance
6. Search and LLM visibility
7. Polish

Precedent before a new decision

The agent searches in this order and follows the first match, even if it would have chosen differently. Disagreement goes to the retro, not into the build.

1. This project’s decision logdecisions.md
2. Standing calls29 defaults, below
3. Gold examplesSections you approved
4. Framework rulesThe references

Standing calls

How the recurring questions are decided. Each is the call and its reason. A project can override one in its decision log; new ones arrive only through the retro.

Every non-obvious call is written down

One entry per call in the project’s decisions.md. States: decided, pending, asked, approved, overridden.

## D-014 · 2026-11-12 · decided · reversible
Call: FAQ items stored as a collection, not local props
Why: same questions on pricing and product pages (rule of three met)
Alternatives: local props per page (rejected: duplicate edits)
Owner: agent · Review: lead dev

Questions go out in one message, all open calls together, each with options and a recommended answer, so a single “yes” approves it. The agent keeps building everything that does not depend on the answer.

How it learns your judgment

Rules alone make a careful developer. Your corrections and your finished work make it build like you.

1. You override a callThe log marks it overridden.
2. /creogen-retroTurns it into a standing call or a rule edit.
3. A test case is addedThe same miss can never pass again.
4. Next projectThe agent follows the new precedent.

Gold examples with /creogen-capture

After you approve a section, capture it: the Figma frame, what was built, the components and axes chosen, where the content lives, and one line on why for every non-obvious choice, including the ones that look wrong but are right. Agents copy what they see, so these teach more than any rule. Capture only reads Figma, staging, a branch or a repo, never a live site.

The skills

Shared language

One word, one meaning, for people and agents alike.

Frame

A Figma artboard width; values are exact there.

Snap

Use the nearest token within 2 px and record it. Beyond that, ask.

Recipe

A saved section composition with defaults.

Variant

A different look or layout of the same component.

Home

Collection, global, reusable block or local.

Override

An optional field on a shared block; empty means shared.

Look and tag

How a heading looks versus its level in the outline.

Dev note

Any Figma annotation. Binding; conflicts become questions.

Tracer section

The first section built end to end to prove the pipeline.

Call

A decision the rules do not fully settle: decide, decide and flag, ask first, or never.

One-way door

A change that cannot be cleanly undone once seen. Always asked first.

Gold example

An approved section with the reason behind every non-obvious call.

Gate

An automated check. Floor gates block the release.