site-spec
GitHub在构建WordPress站点前,通过交互式问答收集用户布局偏好和插件需求,生成指导后续设计与开发的Site Spec。
Trigger Scenarios
Install
npx skills add Automattic/studio --skill site-spec -g -y
SKILL.md
Frontmatter
{
"name": "site-spec",
"description": "Gather the layout preference and plugin needs for the active site before building it. Run this after the site to work on has been picked and before any design work.",
"user-invokable": true
}
Site Spec Discovery
Before building a WordPress site, gather the user's basic preferences through a short interactive discovery phase. This produces a Site Spec that guides all subsequent design and development decisions.
Precondition: an active site
This skill works on the active site — the one announced at the top of the user's message. If there is no active site, stop and let the user know.
How to Run
AskUserQuestion constraints: Each call supports 1-4 questions, each with 2-4 options. An "Other" free-form option is automatically provided by the system — do NOT add one yourself. Keep option labels short (1-5 words). Only use AskUserQuestion for questions that have meaningful predefined options. For open-ended questions, just ask in your text output — the user will type their answer in the prompt.
Use AskUserQuestion for:
- One-page site or multi-page site? (e.g., single scrollable page with sections vs. separate pages for each area)
The business/brand name is the active site's name unless the prompt gives a different one. Do not ask for it. The one exception: when the site name is clearly a placeholder (e.g. "test", "Site 1") and the prompt gives no brand, ask for the brand name in your text output and stop and wait for the reply — do NOT call any tools in that turn.
A new site's spec needs nothing from the site itself: do not search its files or list its plugins and themes before the design is settled.
The design
Load the visual-design skill first — the catalogs, the DESIGN.md format, and the sneak-peek rules live there — and follow its "Concept and Direction" runbook. The design is settled in two steps, the look and then the layout, each with one pick_design call, repeated only when the user asks for other options:
- Pass
options: 4so the user picks, oroptions: 1when there is nothing to pick — the user asked to be surprised or to skip the questions, or the brief names the entry. For a reference site, look at it once withtake_screenshot(display: false) and choose its closest entries, withoptionsset to their number: two whenpresent_design_optionsis available, otherwise one. - With one entry, use it without asking. With more, ask once, one option per entry in the order returned, labelled with the entry's name, without describing the options in prose first. A typed answer ("2 but darker") is a preference to apply to the closest option; asking for other options, as a choice or in their own words, means drawing that step again and asking the same way.
- The look:
catalog: "directions", asking "Which look should I build?". Skip this step when the active-site line names a design system and the user did not ask for a new look.- If
present_design_optionsis available: whengenerate_imagesis available too, load theimageryskill and generate the look image first. Pass each option'sDESIGN.mddraft (see thevisual-designskill) as itspreview, with that image and a one-line description of the feel. - Otherwise use
AskUserQuestion, each option with a one-line description of the look. - Write the picked look to
DESIGN.mdat the site root: the draft's front matter exactly as the user saw it, then every section. Then, whengenerate_imagesis available, generate the site's image set in that look (see theimageryskill) so the layout previews and the build have it.
- If
- The layout:
catalog: "layouts", asking "Which layout should I build?".- If
present_design_optionsis available: pass one sneak peek per option, in the picked look and with the site's image set (see thevisual-designskill), as itspreview, with a one-line description of the layout. - Otherwise use
AskUserQuestion, each option with a one-line description of how its first screen would look. - Add the picked layout to the Layout section of
DESIGN.md, then build it.
- If
After Gathering Answers
Use the layout preference to guide all subsequent design decisions.
State the plan as a short Site Spec summary before building. The summary MUST include a Concept line — the signature layout concept settled by pick_design or picked by the user, as Concept: <catalog name> — <one-line adaptation>, the entry's name verbatim so the user can find it, then the twist — followed by a Layout map (as the visual-design skill defines it: one line per section of the page saying what the concept does to it), a Direction line — the artistic direction behind DESIGN.md, as Direction: <catalog name> — <one-line adaptation> — and a Functionality & plugins line. A side designed from the brief rather than the catalog is stated as Concept: <the brief's words> — <how it is built> or Direction: <the brief's words> — <how it is built>. For the plugins line: review the requested features, load the plugin-recommendations skill, and list the specific plugins the site needs — e.g. WooCommerce for selling products, Jetpack Forms for a contact form, Jetpack Newsletter for email signups, Sensei LMS for courses, Crowdsignal for polls/surveys — or "None — core blocks only" when nothing beyond static content is required. Install the listed plugins while building (Workflow Step 3); do not silently hand-build static markup for a feature a plugin should provide.
When to Skip the Questions
Skipping means skipping the interactive questions only — each design step then returns a single entry, DESIGN.md is still written, and you still produce the Site Spec summary (including the Functionality & plugins line) before building. Do NOT ask questions if:
- The user already provided the layout preference in the initial prompt.
- The user says "just build something" or "surprise me". Pick a bold creative direction yourself and proceed.
- The user explicitly asks to skip the setup or says they don't want questions.
Version History
-
b921521
Current 2026-09-23 02:50
重构为两阶段设计流程(先定风格后定布局),集成visual-design技能,支持从目录选择设计并预览,优化了选项展示与交互逻辑。
- 0d55cb5 2026-08-20 12:15


