How to use CreativePower

Everything you need to ship a brand-coherent landing page in 5 minutes. Use the sidebar to jump around.

Quick start — 5 steps to first generation

From the sidebar, click Projects → New project. Name it, describe the brand in 1 sentence, click Create.
On the project page, click the DESIGN.md card. You can edit the seeded tokens (colors, typography), or click ✨ Generate with AI to create a fresh DESIGN.md from a longer brand brief.
Back on the project page, click Generate page.
Fill in the Brief field with what THIS specific page is for. Pick a Page Type (Marketing is the most common). Pick a Motion Intensity and Quality. Hit the big orange button.
Wait 30-180 seconds. The HTML streams in live on the right. When done, you can Download the .html, Export as a Next.js project, or Save as skill to reuse the recipe.

DESIGN.md explained

DESIGN.md is an open spec from Google for describing design systems as structured markdown — YAML frontmatter for tokens, markdown body for narrative context. CreativePower stores one per project and feeds it to Claude on every generation.

Why this matters

Other AI landing-page tools generate beautiful one-offs that all look different. With DESIGN.md, every page in a project shares colors, typography, spacing, and component tokens — guaranteeing brand consistency.

Three ways to create one

Text brief: Describe your brand in plain English. Claude writes the full DESIGN.md.
Template: Apply one of 44 hand-curated styles (fintech indigo, editorial serif, developer dark and more).
Vision: Upload screenshots of sites you love. Claude extracts the design language.

Page types reference

The Page Type selector tells Claude which structural template to follow.

Type	Best for
Marketing	Default homepage. Hero + features + social proof + CTA + footer.
Product	Product detail page. Image + description + add-to-cart pattern.
Feature	Single-feature deep dive. How it works, before/after, FAQ.
Docs	Documentation landing. Quickstart, navigation cards, search.
Blog post	Long-form editorial article. Title, byline, body, pullquotes.
Pricing	3-tier comparison + feature matrix + FAQ.
Awwwards-style	Full-bleed scroll-pinned showcase. The whole page IS the motion. (Was "Motion" — renamed for clarity.)
3D Hero	Marketing page with a Spline 3D scene as the hero background.

Motion intensity guide

How much movement to layer on. Independent of page type.

None

Static, no JS. Fastest page-load. Use for content-heavy pages where performance matters.

Subtle

AOS-style fade-in reveals as you scroll. Light, tasteful. Good default for SaaS.

Bold

GSAP + Lenis smooth scroll + ScrollTrigger animations. Premium feel. Adds ~50KB of JS.

Awwwards

Pinned heroes + parallax layers + magnetic CTAs. Designer-portfolio energy. Adds ~80KB of JS.

Skills tutorial

A Skill is a saved recipe — the brief + page type + motion settings + DESIGN.md context. Save once, apply on any future project.

How to save a skill

Generate a page you love.
Above the preview, click Save as skill.
Give it a name (e.g. "SaaS marketing — dark — bold motion").
Find it later under Skills in the sidebar.

How to apply a skill

From the Skills page, click any skill → Apply → pick a target project. The recipe pre-fills the generation form. Hit Generate.

Workflows tutorial

A Workflow is a chain of Skills run in sequence. Useful for generating a full multi-page site in one click.

Example: full SaaS site workflow

Step 1: Generate DESIGN.md from brand brief
Step 2: Generate Marketing homepage
Step 3: Generate Pricing page
Step 4: Generate Feature spotlight page
Step 5: Generate FAQ page

Build workflows at Workflows → New. Each step inherits the previous step's DESIGN.md.

Vision-generate from images

Upload screenshots of sites you admire. Claude analyzes them and extracts a DESIGN.md that captures the aesthetic — colors, typography hierarchy, layout philosophy.

Steps

From a project page, click Inspirations.
Upload 1-3 images (or paste a URL — we'll screenshot it for you).
Go to the DESIGN.md generate page, switch to Inspirations tab.
Pick 1-3 references, optionally add a brief, click Generate.

Troubleshooting

Generation returns blank

Three common causes:

Brief is empty. The Brief field must have content. Look for the red border + helper text.
Anthropic API key issues. Check .env.local — is ANTHROPIC_API_KEY set? Has it expired?
Anthropic credit balance is $0. Visit console.anthropic.com → Billing.

Sign-up email never arrives

Supabase free tier's default email service is rate-limited. Check spam first. If genuinely missing: in your Supabase dashboard, Authentication → Providers → Email → confirm "Confirm email" is enabled and the template isn't broken.

Dev server won't start

Usually a port conflict. Try npm run dev -- -p 3001. Or check the terminal for the actual error.

Glossary

DESIGN.md: Google's open spec for describing design systems. YAML tokens + markdown body. The canonical brand source-of-truth in every CreativePower project.
Brief: A short text description of what a page (or DESIGN.md) is for. The AI's primary input.
Page type: Structural template (Marketing, Pricing, etc.) telling Claude what layout to generate.
Motion intensity: How animated the generated page should be — None, Subtle, Bold, Awwwards.
Motion pattern: A specific reusable animation (e.g. Floating orbs, Magnetic CTA) you can opt into for a generation.
Skill: A saved generation recipe — brief + settings + DESIGN.md context. Reusable across projects.
Workflow: An ordered chain of Skills. Generate a full multi-page site in one click.
Inspiration: A screenshot or URL capture you upload to inform vision-generation of a DESIGN.md.
Generation: A single AI output stored to your project history. Each has its own preview, HTML, and export options.