القائمة
Mode selection, project setup, and status line installation for first-time plugin use. Runs after goal selection.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Generates a single-file HTML prototype directly in Claude Code. One-pass approach: gather context, agree on a brief, generate the interactive prototype, iterate. Use for new products (after planning), new features for existing products, or redesigns. Pulls design context from planning documents or Figma designs.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Generates a single-file HTML landing page with conversion-optimized structure and copy. Reads StoryBrand deliverable as the copy foundation. Use when the user needs a marketing landing page for their product.
Guides design intent exploration and reference gathering before opening any design tool. Use when starting high-fidelity UI work, establishing visual direction, or when the product needs intentional design decisions rather than defaults.
Strategic checkpoint primitive – invoke at high-leverage moments to consult the Opus 4.7 advisor agent for a short course correction. Use early in a task (before substantive work), before declaring done, when stuck, or when changing approach. Quotes Anthropic's advisor-tool docs verbatim for timing and treatment.
Generates and maintains a comprehensive CLAUDE.md file for any project. Use when setting up a new project, when the project has evolved significantly, or when switching tech stacks.
| name | meta-setup-configure |
| description | Mode selection, project setup, and status line installation for first-time plugin use. Runs after goal selection. |
| disable-model-invocation | true |
| model | claude-opus-4-7 |
| effort | high |
| license | MIT |
Three actions in order. Do not skip any. Do not start working on the user's goal until all three are done.
Present this question. No text before it.
question: "How do you want to work?"
header: "Mode"
options:
- label: "Guided mode (Recommended)"
description: "Step by step – I share my thinking, ask questions, and you review each step"
- label: "Autopilot"
description: "Mostly automated – I plan and execute with minimal interruption. Faster but less control."
Wait for the answer, then proceed to Action 2.
After receiving the mode answer, do these in order:
Run detect-environment.sh from the meta-setup skill's scripts directory. Show results in plain language:
Create .design-engineer-plugin/config.yaml in the project root:
# Design-Engineer Plugin Configuration
# Generated by /design-engineer:launch on {current_date}
project:
type: "existing"
mode: "{selected_mode}"
deliverables_path: "design/"
environment:
plugins:
context7: {true/false}
figma: {true/false}
playwright: {true/false}
mcps:
figma_console: {true/false}
dependencies:
tracking_file: ".design-engineer-plugin/dependencies.yaml"
auto_suggest: true
Scaffold design/ folder structure using init-project-structure.sh from the meta-setup skill's scripts directory.
Show a brief summary of what was set up.
Then present this question:
question: "Would you like to install the design-engineer status line?"
header: "Status line"
options:
- label: "Yes (Recommended)"
description: "Shows model, usage limits, context bar, and pipeline progress below every prompt"
- label: "No"
description: "Skip – re-run /design-engineer:launch later to install"
If "Yes": follow the status line installation steps from the meta-setup skill's Step 5 (check existing config, create directories, copy script, update settings.json, explain watch mode).
Say "You're all set. Let's get started." then immediately load the command matching the user's goal from the previous skill:
| Goal | Command |
|---|---|
| Review what I have | /design-engineer:review |
| Implement from Figma | /design-engineer:development |
| Design a new feature | /design-engineer:discovery |
| Set up the dev workflow | /design-engineer:development |
The command reads mode from .design-engineer-plugin/config.yaml and follows the PLAN → EXECUTE → PRESENT → FEEDBACK workflow.