Overview
This skill turns a rough story plus brand references into a stronger web-design workflow:
- generate a story-first master prompt draft
- add CI and branding as a separate theming layer
- hand the merged prompt to Claude Design to get a strong visual reference before building the real web app
Use this when the project needs a memorable site, landing page, retrospective, presentation site, or promotional microsite that should feel intentional rather than generic.
Workflow
Step 1: Build The Story-First Master Prompt
Start from the story, not the theme.
Collect the core narrative first:
- what happened
- why it mattered
- what changed
- what was discovered
- who made it possible
- how it should end
Prefer turning raw notes into a compact story source file first, such as core-story.md.
The first master prompt draft should define:
- role
- output objective
- critical design principle
- emotional arc
- experience structure
- content source
- asset guidance
- page structure
- storytelling do/don't rules
Keep the first draft focused on:
- narrative spine
- section flow
- content hierarchy
- pacing
- emotional tone
Do not overload this first prompt with detailed branding rules yet.
Step 2: Add CI / Branding As A Separate Layer
Once the story-first prompt is stable, add the theming layer.
Keep branding separate from story structure while drafting. This usually improves prompt quality because the model is not trying to solve narrative architecture and art direction at the same time.
The branding layer should define:
- brand rule
- what to borrow from the reference and what not to copy
- color system
- typography direction
- motion direction
- textures / atmosphere
- logo usage
- component feel
- visual do/don't rules
When possible, inspect real references first:
- brand website
- screenshots
- exported images
- existing HTML reference
- approved design comps
Then merge the story layer and the theming layer into the final master prompt.
Step 3: Hand Off To Claude Design
After the merged prompt is ready, paste it into Claude Design or a similar design model to generate the visual reference.
Ask for a design output that is useful for implementation, ideally:
- a high-fidelity landing page concept
- a static HTML reference
- detailed section styling guidance
- layout and interaction decisions
- color and type treatments that can be copied into production code
Treat the Claude Design result as the visual oracle for the implementation pass.
After that:
- save the result as a reference file
- build the fully functional web app against that reference
- use browser testing to verify fidelity
Working Rules
Do
- start with story and content shape before theming
- create one strong message per section
- keep copy short enough to read while presenting or scrolling
- choose a clear emotional arc
- use assets selectively, not exhaustively
- separate prompt generation into layers when the brief is dense
- ask Claude Design for implementation-useful output, not just moodboards
- save the accepted visual output as a reference file and build against it
- visually verify the built site with browser tooling
Don't
- ask the model to invent story structure and full branding system in one overloaded first draft
- let CI rules dominate the story
- dump every discovered idea, tool, or asset into the hero
- rely on generic corporate section patterns when the site should feel cinematic
- keep long explanatory text when short lines would land better
- build the full app before you have an accepted visual reference
- treat the design model output as final production code without implementation cleanup
Output Artifacts
This workflow works best when it produces separate artifacts:
core-story.md- story-first master prompt
- branding / theming layer
- merged final master prompt
- Claude Design prompt
- accepted visual reference such as
reference/index.html
Reference File
For reusable prompt shapes, read references/prompt-templates.md.