Source profileQuality 76/100

nexu-io/open-design/design-templates/web-prototype/SKILL.md

web-prototype

General-purpose desktop web prototype. Single self-contained HTML file built by copying the seed `assets/template.html` and pasting section layouts from `references/layouts.md`. Default for any landing / marketing / docs / SaaS page when no more specific skill matches.

Source repository stars
91,167
Declared platforms
0
Static risk flags
1
Last source update
2026-08-25
Source checked
2026-08-25
DecisionCompatibilityInstallWorkflowPermissionsEvidenceSourceFAQ

Decision brief

What it does: where it fits

Produce a single, self-contained HTML prototype using the bundled seed and layout library — not by writing CSS from scratch. The seed already encodes good defaults (typography, spacing, accent budget). Your job is to compose it.

Best for

    Not for

    • Tasks that require unconfirmed production actions or broad system permissions.
    • Environments where the pinned source and install steps cannot be inspected.

    Compatibility matrix

    Platform support, with evidence labels

    PlatformStatusEvidenceWhat to check
    CodexNot declaredNo explicit evidencePortability before use
    Claude CodeNot declaredNo explicit evidencePortability before use
    CursorNot declaredNo explicit evidencePortability before use
    Gemini CLINot declaredNo explicit evidencePortability before use
    Open the compatibility checker

    Installation

    Inspect first. Install second.

    The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.

    Source-detected install commandSource
    npx skills add https://github.com/nexu-io/open-design --skill "design-templates/web-prototype"
    Safe inspection promptEditorial

    Inspect the Agent Skill "web-prototype" from https://github.com/nexu-io/open-design/blob/edfa6b5f447e95cb120eae030f03baba00dc34de/design-templates/web-prototype/SKILL.md at commit edfa6b5f447e95cb120eae030f03baba00dc34de. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.

    Workflow

    What the source asks the agent to do

    1. 01

      Workflow

      1. Read assets/template.html end-to-end — at minimum through the block. The class inventory at the top of references/layouts.md lists every class that must be defined there; if one is missing, add it to rather than re-defining it inline on every section. 2. Read references/layou…

      Read assets/template.html end-to-end — at minimum through the block. The class inventory at the top of references/layouts.md lists every class that must be defined there; if one is missing, add it to rather than re-defi…Read references/layouts.md so you know which section skeletons exist. Don't write a section type that isn't covered — pick the closest layout and adapt.Read the active DESIGN.md (already injected into your system prompt). Map its colors to the six :root variables in the seed; don't introduce new tokens.
    2. 02

      Step 0 — Pre-flight (do this once before writing anything)

      1. Read assets/template.html end-to-end — at minimum through the block. The class inventory at the top of references/layouts.md lists every class that must be defined there; if one is missing, add it to rather than re-defining it inline on every section. 2. Read references/layou…

      Read assets/template.html end-to-end — at minimum through the block. The class inventory at the top of references/layouts.md lists every class that must be defined there; if one is missing, add it to rather than re-defi…Read references/layouts.md so you know which section skeletons exist. Don't write a section type that isn't covered — pick the closest layout and adapt.Read the active DESIGN.md (already injected into your system prompt). Map its colors to the six :root variables in the seed; don't introduce new tokens.
    3. 03

      Step 1 — Prepare index.html from the seed

      Use assets/template.html as the seed for the canonical project file, normally index.html.

      Use assets/template.html as the seed for the canonical project file, normally index.html.Replace the six :root variables with the active design system's tokens. Replace the page and the topnav brand.
    4. 04

      Step 2 — Plan the section list

      Pick layouts before writing copy. Default rhythms (from layouts.md):

      Pick layouts before writing copy. Default rhythms (from layouts.md):State the chosen list in one sentence to the user before writing — they can redirect cheaply now and not after 200 lines of HTML.
    5. 05

      Step 3 — Paste and fill

      For each chosen layout, copy the block from layouts.md into of the project HTML. Replace bracketed [REPLACE] strings with real, specific copy from the user's brief. No filler — if a slot is empty, the section is the wrong choice; pick a different layout.

      For each chosen layout, copy the block from layouts.md into of the project HTML. Replace bracketed [REPLACE] strings with real, specific copy from the user's brief. No filler — if a slot is empty, the section is the wro…

    Permission review

    Static risk signals and limitations

    Writes files

    medium · line 53

    The documentation asks the agent to create, modify, or delete local files.

    ### Step 5 — Write the project file

    Evidence record

    Why each signal appears

    EvidenceSourceComputedTestedEditorial
    SignalValueEvidence typeMeaning
    Quality score76/100ComputedDocumentation, specificity, maintenance, and trust rules
    Repository stars91,167SourceRepository attention, not individual Skill quality
    Compatibility0 platformsSourceDeclared in the catalog source record
    Usage guideautomated source guideEditorialGenerated or reviewed according to the visible evidence level

    Pinned source

    Provenance and original SKILL.md

    Repository
    nexu-io/open-design
    Skill path
    design-templates/web-prototype/SKILL.md
    Commit
    edfa6b5f447e95cb120eae030f03baba00dc34de
    License
    Apache-2.0
    Collected
    2026-08-25
    Default branch
    main
    View the original SKILL.md

    Web Prototype Skill

    Produce a single, self-contained HTML prototype using the bundled seed and layout library — not by writing CSS from scratch. The seed already encodes good defaults (typography, spacing, accent budget). Your job is to compose it.

    Resource map

    web-prototype/
├── SKILL.md                ← you're reading this
├── assets/
│   └── template.html       ← seed: tokens + class system + chrome (READ FIRST)
└── references/
    ├── layouts.md          ← 8 paste-ready section skeletons
    └── checklist.md        ← P0/P1/P2 self-review

    Workflow

    Step 0 — Pre-flight (do this once before writing anything)

    1. Read assets/template.html end-to-end — at minimum through the <style> block. The class inventory at the top of references/layouts.md lists every class that must be defined there; if one is missing, add it to <style> rather than re-defining it inline on every section.
    2. Read references/layouts.md so you know which section skeletons exist. Don't write a section type that isn't covered — pick the closest layout and adapt.
    3. Read the active DESIGN.md (already injected into your system prompt). Map its colors to the six :root variables in the seed; don't introduce new tokens.

    Step 1 — Prepare index.html from the seed

    Use assets/template.html as the seed for the canonical project file, normally index.html.

    Replace the six :root variables with the active design system's tokens. Replace the page <title> and the topnav brand.

    Step 2 — Plan the section list

    Pick layouts before writing copy. Default rhythms (from layouts.md):

    Page kindDefault rhythm
    Landing1 hero → 3 features → 4 stats or 5 quote → custom split → 6 cta
    Marketing / editorial1 hero-center → 7 log list → 6 cta
    Pricing1 hero-center → 8 comparison table → 6 cta
    Docs index1 hero-center → 7 log list (sections of docs) → 6 cta

    State the chosen list in one sentence to the user before writing — they can redirect cheaply now and not after 200 lines of HTML.

    Step 3 — Paste and fill

    For each chosen layout, copy the <section> block from layouts.md into <main id="content"> of the project HTML. Replace bracketed [REPLACE] strings with real, specific copy from the user's brief. No filler — if a slot is empty, the section is the wrong choice; pick a different layout.

    Step 4 — Self-check

    Run through references/checklist.md top to bottom. Every P0 item must pass before you move on. P1 items should pass; P2 are bonus.

    Step 5 — Write the project file

    Write the completed HTML to the canonical project file, normally index.html. Then send one short ordinary assistant summary naming the file and describing what's there. Do not output the full HTML source in chat.

    Hard rules (the seed protects most of these — don't fight it)

    • Single accent, used at most twice per screen. Eyebrow + primary CTA is the default budget.
    • Display font is serif (Iowan Old Style / Charter / Georgia in the seed). Sans for body. Mono for numerics, captions, eyebrows.
    • Image placeholders, not external URLs. Use the .ph-img class — never link to a stock photo CDN.
    • Mobile reflow already works via the seed's media query at 920px. Don't break it by adding fixed widths.
    • data-od-id on every <section> so comment mode can target it.

    Output contract

    Filesystem runs use project files as the source of truth:

    index.html

    OpenDesign derives the preview from the written project file. Do not also emit a source-code <artifact> block for the same generation turn.

    One short summary after writing the file. Nothing after.

    Frequently asked questions

    What to verify before installation and use

    What does the web-prototype source document cover?

    Produce a single, self-contained HTML prototype using the bundled seed and layout library — not by writing CSS from scratch. The seed already encodes good defaults (typography, spacing, accent budget). Your job is to compose it.

    How do I install web-prototype?

    The source record exposes this install command: npx skills add https://github.com/nexu-io/open-design --skill "design-templates/web-prototype". Inspect the command and pinned source before running it.

    Which permission-related actions were detected?

    Static rules flagged write-files in the source; the page lists the matching lines and excerpts.

    Alternatives

    Compare before choosing

    Computed 7591,167

    nexu-io/open-design

    web-prototype

    General-purpose desktop web prototype. Single self-contained HTML file built by copying the seed `assets/template.html` and pasting section layouts from `references/layouts.md`. Default for any landing / marketing / docs / SaaS page when no more specific skill matches.

    2026-08-250 platforms
    Computed 9647

    maquina-app/rails-claude-code

    mvp-creator

    Create comprehensive MVP documentation for Rails applications. Use this skill whenever a user describes a new app idea, wants to explore a SaaS concept, needs competitor research, or is starting a new project from scratch — even if they don't explicitly say "MVP". Triggers on "I have an idea for...", "I want to build...", "help me plan...", "research competitors for...", "create a business plan for...", "design a brand for my app", "set up Claude for my Rails project", "bootstrap an app", or any

    2026-08-160 platforms
    Computed 95915

    sunchaokun/PPT-Design-Skill

    ppt-design-skill

    AI-powered PPT generation — 40,000+ style combinations, narrative-driven, design-intelligent, AI images, fully editable .pptx. Three modes: Build (default) + VI Build + FreeStyle (quick draft). 8 goal-type layouts, 35 moods, README parsing, size-aware image assignment, 3 structurally-different build.py proposals, brand compliance. Engines: Seedream, GPT Image, DALL-E, Wanx, Kimi.

    2026-08-240 platforms
    Computed 9439,098

    wshobson/agents

    brand-landingpage

    Brand-first landing page designer — runs a brand-identity interview (colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with deployment-ready HTML. Use when the user asks to create, design, or build a landing page, homepage, or marketing page and has no established visual direction. Skip when they have a design mockup, need a dashboard or app UI, are working at component level, building a multi-page app, or restyling with known design tokens —

    2026-08-240 platforms