Add creative-direction skill: expand vague site briefs with site-type content#3610
Add creative-direction skill: expand vague site briefs with site-type content#3610lezama wants to merge 9 commits into
Conversation
… content When a user gives a vague prompt like 'a site for a bar', Studio now loads the creative-direction skill to infer site type and expand to appropriate pages, sections, and forms (menu, events, reservations, gallery) before building — rather than defaulting to a minimal one-page placeholder. Inspired by Andrei Draganescu's Studio vs Telex comparison (May 2026): the gap was Telex's rich system-prompt assumptions for weak prompts, not design aesthetics (which Studio already covers). The fix is a skill, not a system-prompt rewrite. Changes: - apps/cli/ai/skills/creative-direction/SKILL.md: new skill with site-type detection table, per-type content plans (12 site types), design direction guidance, and instructions to brief the user before building - apps/cli/ai/system-prompt.ts: step 2 (Plan the design) now loads the creative-direction skill before writing any files Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
12 tests covering: - Skill discoverability (in loadSkills() output) - Body content (site-type detection, per-type content plans, design direction, brief-user instruction, skip conditions) - System prompt integration (referenced in Plan the design step, not in remote-site workflow, proceeds without asking approval) Before (trunk): creative-direction has 0 refs in system-prompt.ts and the skill directory does not exist — all integration tests would fail. After (this branch): all 12 tests pass. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
|
||
| 1. **Get site details**: Use site_info to get the site path, URL, and credentials. | ||
| 2. **Plan the design**: Before writing any code, review the site spec (from the \`site-spec\` skill) and load the \`visual-design\` skill to plan the visual direction: layout, colors, typography, and spacing. | ||
| 2. **Plan the design**: Before writing any code, run the \`creative-direction\` skill to expand the brief — infer site type, decide which pages and sections to create, commit to a bold design direction, and give the user a short 2–4 line summary of what you're building. Then proceed without asking for approval. Skip this if the user already provided detailed content or said to keep it minimal. |
There was a problem hiding this comment.
I think if we were to do something like this, we should not remove site spec, we should enhance it (both of these skills serve the same purpose: gathering user needs). The issue that I see personally though is:
- I'm not sure we should expand the brief without user validation?
- Is random expansion (like here and telex) better than a more guided setup/questions like BigSky's wizard?
So I see three approaches:
- No expansion (Trunk behavior)
- Auto-expansion (Telex, the current state of this PR)
- Guided expansion (BigSky)
I personally feel all of them have values, so I think we should first decide what is the UX that we want to offer before choosing our path or offering multiple paths.
Any thoughts @richtabor @mtias
There was a problem hiding this comment.
Do we have any data that provides insight on how people typically use these tools?
For example, are they expecting a one-shot or are they expecting to iterate on the design?
Using an auto-expansion skill will add time to the generation.
Also, providing specific examples can be prescriptive, meaning the AI will use the examples every time instead of doing anything creative.
I think the system prompt should be doing less heavy lifting over time so the agent becomes more fluid, agile, and flexible.
There was a problem hiding this comment.
I think it depends on the situation. No data, but I could bet expansion works best with people onboarding to launch on the web as part of the acquisition funnel. It creates a wow moment and an ownership of a custom made product.
However for people running studio code in CLI the guided expansion is likely better because they are more crafty - they have a more coherent and nuanced take on what they want the end result to be.
We must remember that as long as the user geenrates from prompts they will always be vague. Either way it is better than leaving the LLM with no steering.
There was a problem hiding this comment.
Good framing on the three paths. Who would be the target use case for "No expansion"?
I've addressed @draganescu 's feedback (open-ended examples, not closed lists).
There was a problem hiding this comment.
Just pushed a Step 0 that tries to guess the mode:
- Clear type + thin content → auto-expand
- Ambiguous type → ask one question to resolve it, then expand
- Already detailed / "keep it minimal" → skip entirely
What do you all think?
📊 Performance Test ResultsComparing 361b301 vs trunk app-size
site-editor
site-startup
Results are median values from multiple test runs. Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff) |
…l env Add explicit caveat to the general Jetpack guidance in plugin-recommendations.ts: - List modules that require a wpcom connection (subscriptions, blaze, stats, sync) - Instruct the agent to NOT activate these in Studio's local PHP-WASM environment - Redirect newsletter signup requests to Jetpack Forms (contact-form module) Fixes the error youknowriad observed: wp jetpack module activate subscriptions Error: Newsletter could not be activated. Exit code: 1 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Check connection status first rather than blocking outright. If the site is not connected to wpcom, fall back to Jetpack Forms for newsletter signups instead of activating the subscriptions module. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
| - *"Hartley & Associates"* (law) → authoritative, minimal; navy + gold; refined serif | ||
|
|
||
| The name is a creative brief. Read it. Do not default to safe/generic. | ||
|
|
There was a problem hiding this comment.
Do not default to safe/generic.
I think this should be a geeneral design skill from claude or vercel
|
|
||
| 1. **Get site details**: Use site_info to get the site path, URL, and credentials. | ||
| 2. **Plan the design**: Before writing any code, review the site spec (from the \`site-spec\` skill) and load the \`visual-design\` skill to plan the visual direction: layout, colors, typography, and spacing. | ||
| 2. **Plan the design**: Before writing any code, run the \`creative-direction\` skill to expand the brief — infer site type, decide which pages and sections to create, commit to a bold design direction, and give the user a short 2–4 line summary of what you're building. Then proceed without asking for approval. Skip this if the user already provided detailed content or said to keep it minimal. |
There was a problem hiding this comment.
I think it depends on the situation. No data, but I could bet expansion works best with people onboarding to launch on the web as part of the acquisition funnel. It creates a wow moment and an ownership of a custom made product.
However for people running studio code in CLI the guided expansion is likely better because they are more crafty - they have a more coherent and nuanced take on what they want the end result to be.
We must remember that as long as the user geenrates from prompts they will always be vague. Either way it is better than leaving the LLM with no steering.
- Site-type detection: change closed table to open-ended bullet list with explicit note to reason by analogy for anything not listed - Per-type content plans: frame as 'starting points / inspiration, not prescriptions' rather than 'standard content plans' - Design direction step: remove 'bold' (prescriptive word that skews all designs the same way); add 'These are illustrations, not a template' Addresses draganescu's review comments on PR #3610. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Instead of always auto-expanding, the skill now reads the brief first: - Clear site type + thin content → auto-expand (previous behavior) - Ambiguous type (e.g. 'a site for my business') → ask ONE question, then expand - User already described content / said 'minimal' → skip the skill This covers all three UX paths (no expansion, auto, guided) from a single skill, driven by what the user actually gave us. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…p 4 intent - Remove 'Do not default to safe/generic' — trusting the model's design judgment rather than over-specifying (draganescu's feedback) - Clarify 'do not ask for approval' in Step 4: this specifically means don't turn the brief into a second round of questions. Step 0 already handles the one clarifying question if the brief is ambiguous. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
5 participants
Related issues
N/A — follows up on internal discussion in #studio-code (May 2026 Studio vs Telex comparison).
How AI was used in this PR
Claude Code drafted the skill content and tests. All code reviewed and edited by author.
Proposed Changes
apps/cli/ai/skills/creative-direction/SKILL.md: when building a new site from a vague prompt, the agent now infers site type, decides which pages/sections/forms to create, commits to a bold design direction, and briefs the user in 2–4 lines before building — without asking follow-up questions.apps/cli/ai/system-prompt.ts: step 2 (Plan the design) now loads thecreative-directionskill instead of just reviewing the design guidelines.Background
Andrei Draganescu ran a head-to-head comparison between Studio Code and Telex using simple prompts ("Make a site for a bar named Boogie Bar"). Telex won because its system prompt makes opinionated content assumptions for the site type — adding menu, events, reservations, and gallery pages without being asked. Studio would only ask for name and one-page vs multi-page, then build a minimal result.
Key finding: "The main differences appear only because of system prompt." This is a prompting/skill gap, not an architecture gap.
Studio's
LOCAL_DESIGN_GUIDELINESalready closely mirrors Telex'sdesign-direction.md(bold aesthetics, typography, motion). What was missing is content intelligence — knowing what a bar site needs vs a SaaS vs a yoga studio.Testing Instructions
Before (trunk):
Studio asks for name (already given), then one-page vs multi-page, then builds a minimal site: a basic theme, generic contact form.
After (this branch):
Before building, the agent outputs something like:
Then builds it — 5 pages, working forms, site-type-appropriate content — without asking further questions.
Automated tests:
12 tests, all passing. These same tests fail on trunk (skill doesn't exist there).
Pre-merge Checklist