القائمة
Use the Open Design workbench to create editable visual projects, prototypes, landing pages, dashboards, mobile screens, decks, and implementation handoffs.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface. Use when creating REST or GraphQL endpoints, defining type contracts between modules, or establishing boundaries between frontend and backend.
Patterns and architectures for autonomous loops — from simple sequential pipelines to RFC-driven multi-agent DAG systems. Use when setting up autonomous development workflows, choosing the right loop architecture, or building CI/CD-style continuous development pipelines.
Conducts multi-axis code review. Use before merging any change. Use when reviewing code written by yourself, another agent, or a human. Use when you need to assess code quality across multiple dimensions before it enters the main branch.
Simplifies code for clarity. Use when refactoring code for clarity without changing behavior. Use when code works but is harder to read, maintain, or extend than it should be. Use when reviewing code that has accumulated unnecessary complexity.
Optimizes agent context setup. Use when starting a new session, when agent output quality degrades, when switching between tasks, or when you need to configure rules files and context for a project.
Guides systematic root-cause debugging. Use when tests fail, builds break, behavior doesn't match expectations, or you encounter any unexpected error. Use when you need a systematic approach to finding and fixing the root cause rather than guessing.
| name | open-design |
| description | Use the Open Design workbench to create editable visual projects, prototypes, landing pages, dashboards, mobile screens, decks, and implementation handoffs. |
| compatibility | opencode |
| metadata | {"surface":"visual-design","backend":"open-design"} |
| phase | build |
| domains | ["ui-ux"] |
| stacks | ["open-design"] |
| allowed_agents | ["designer","lead","developer"] |
| surfaces | ["visual-design","prototyping"] |
| skill_source | built-in |
| origin | null |
| status | active |
Use this skill for visual design, UX/UI, prototypes, product visuals, landing pages, dashboards, pricing pages, docs pages, mobile screens, onboarding, decks, and design handoff.
The workbench URL is configured with OPEN_DESIGN_URL.
Valid examples:
https://open-design.example.comhttp://192.168.1.50:7456Invalid examples:
https://open-design.example.com/projects/my-projecthttps://open-design.example.com/projects/my-project/files/index.htmlResolve the tool baseUrl from approved configuration or explicit user/lead-provided context before calling Open Design tools. Do not invent, guess, or hardcode a URL. If no approved baseUrl is available, stop and ask for the missing configuration/context instead of trying a fallback.
Before using Open Design, inspect the repository for PRODUCT.md and DESIGN.md or equivalent docs.
If present, they are authoritative. If one or both are missing, the designer should use the optional impeccable skill first to create or propose missing context.
Use only the Open Design tools:
open_design_healthopen_design_list_agentsopen_design_list_skillsopen_design_list_design_systemsopen_design_create_projectopen_design_run_designPass the resolved baseUrl to every Open Design tool call, including health,
list, create, and run calls.
Default mode. Use open_design_create_project to create an editable project and return its URL.
Use only when the user explicitly asks to generate the design. Call open_design_run_design and return generated files when available.
When no project is needed, return a design brief, Open Design prompt, implementation notes, risks, assumptions, and visual acceptance criteria.
saas-landingweb-prototypedashboardpricing-pagedocs-pageblog-postmobile-appmobile-onboardingsimple-deck or guizang-pptpm-specmotion-framesemail-marketingsocial-carouselUse the system named by DESIGN.md when possible. Otherwise choose intentionally:
linear, vercel, stripe, cursor, supabase, resend, raycastapple, notion, airbnb, figmaneutral-modern or defaultAvoid generic gradients, fake metrics, fake testimonials, unsupported brand colors, meaningless glassmorphism, nested cards without hierarchy, weak hero sections, inconsistent spacing, and vague startup copy.
Prefer strong hierarchy, credible content, restrained palettes, responsive behavior, implementable components, accessible contrast, realistic states, deliberate typography, and product-specific interactions.
Always return: