inyoDesign

inyoDesign is an HTML-first design skill and tooling system for turning brand rules, design methods, and task input into real deliverables.

It is built for agent workflows that need more than "one prompt in, one image out". The system compiles design inputs into runtime context, routes them through the right workflow, renders process drafts in HTML, verifies them, and exports final outputs.

Primary trigger:

• /inyodesign

What This Project Can Do

inyoDesign currently supports a full Tooling Layer v1 for design execution.

It can:

• ingest brand and design inputs from BRAND.md and DESIGN.md
• scan uploaded brand materials for constraints such as colors, typography, and missing fonts
• compile inputs into structured runtime objects:
  • SpecBundle
  • RuntimeContext
  • ExecutionPlan
  • ArtifactBundle
• route work through HTML-first workflows for:
  • slides
  • poster
  • prototype
• generate HTML process drafts with:
  • page labels like #01
  • five-digit annotation ids
  • toggleable annotation overlays
  • element highlight states for feedback
• run browser-aware QA before delivery
• export final deliverables as:
  • html
  • pdf
  • pptx
  • image
• produce both:
  • human-readable design spec output
  • agent-readable structured spec output

What The Product Flow Looks Like

At a high level, the workflow is:

1. User triggers /inyodesign
2. The system gathers task input, brand input, and runtime capability context
3. It compiles those into a canonical runtime contract
4. It selects a workflow and execution plan
5. It renders an HTML process draft
6. The user reviews the draft in the browser and gives feedback
7. The system runs QA and exports final outputs

This is not just a prompt pack. It is a routed design execution pipeline.

Demo

Add screenshots, videos, and workflow captures here later.

Suggested sections:

• template gallery preview
• HTML process draft with annotation mode
• browser QA
• export results
• end-to-end /inyodesign flow

Example placeholders:

![Template Gallery](./docs/images/template-gallery.png)
![Annotated Process Draft](./docs/images/process-draft-annotation.png)
![Slides Export Preview](./docs/images/slides-export-preview.png)

[Product Walkthrough Video](./docs/videos/inyoDesign-demo.mp4)

How It Works

The core pipeline is:

Inputs
  -> SpecBundle
  -> RuntimeContext
  -> ExecutionPlan
  -> ArtifactBundle

Key implementation layers:

• intake
  • loads source inputs
  • scans brand materials
  • resolves missing font requirements
• compiler
  • builds SpecBundle
  • compiles RuntimeContext
• registry
  • declares available workflows and adapters
• routing
  • chooses the workflow
  • builds ExecutionPlan
• preview
  • renders template galleries
  • renders HTML process drafts
  • powers annotation mode
• qa
  • runs structural and browser-level checks
• artifacts
  • creates verification, provenance, export manifest, and artifact bundles
• exporters
  • exports real html, pdf, pptx, and image deliverables

Current Capabilities

HTML-first process drafts

Process drafts are rendered as HTML and are meant to be reviewed in a browser before final delivery.

The preview layer supports:

• multi-page presentation shells
• page numbering
• annotation mode
• click-to-highlight behavior
• user feedback using page ids and element ids

Export fidelity

The export stack is already beyond placeholder output.

Current fidelity paths:

• HTML -> PDF
  • prefers browser-rendered export
  • falls back to a local PDF path if browser rendering is unavailable
• HTML -> image
  • prefers browser-rendered export
  • falls back to local PNG composition
• HTML -> PPTX
  • generates real editable .pptx
  • maps text hierarchy
  • carries basic style hints such as font size, weight, color, and alignment
  • uses browser-derived relative layout when available

Browser QA

The QA layer can validate:

• page rendering
• annotation toggle availability
• annotation click behavior
• highlight support
• console errors

Installation

The default install path is to run the published installer package directly:

npx @inyoguardian/inyo-design install

This installer auto-detects supported targets and writes the correct integration shape for each one.

Supported targets:

• Codex
  • installs to ~/.codex/skills/inyo-design
• Claude Code
  • installs to ~/.claude/skills/inyo-design
• Cursor
  • writes .cursor/rules/inyo-design.mdc
• GitHub Copilot
  • writes .github/instructions/inyo-design.instructions.md

Optional commands:

npx @inyoguardian/inyo-design status
npx @inyoguardian/inyo-design uninstall

Optional overrides:

npx @inyoguardian/inyo-design install --repo /path/to/repo
npx @inyoguardian/inyo-design install --target codex
npx @inyoguardian/inyo-design install --dry-run

Configuration

The installer can read either:

• inyo.config.json
• .inyodesignrc.json

Example:

{
  "repoRoot": ".",
  "targets": {
    "codex": true,
    "claude": true,
    "cursor": true,
    "copilot": true
  },
  "paths": {
    "codex": "/Users/yourname/.codex/skills",
    "claude": "/Users/yourname/.claude/skills"
  }
}

Repository Layout

src/
  schema/      Data contracts and validators
  runtime/     Runtime capability loading and delivery recommendation
  intake/      Spec loading, parsing, brand scan, font detection
  compiler/    SpecBundle and RuntimeContext builders
  registry/    Workflow and adapter registry
  routing/     Eligibility, ranking, fallback, ExecutionPlan generation
  preview/     Template gallery, preview shell, annotation layer
  qa/          HTML QA and browser-interaction QA
  artifacts/   Verification, provenance, export manifest, ArtifactBundle
  exporters/   HTML/PDF/PPTX/image export orchestration

scripts/
  export_presentation.py
  inspect_presentation_dom.mjs
  render_presentation_assets.mjs
  compose_presentation_png.mjs
  build_pptx_from_pages.mjs

test/
  runtime / intake / compiler / routing / preview / qa / artifacts / exporters

Development

Install dependencies:

npm install

Run the full verification command:

npm run check

Other useful commands:

npm run typecheck
npm test
npm run test:exporters
npm run test:qa

Publishing

The package is published at:

• @inyoguardian/inyo-design

The preferred release path is:

• GitHub Release
• npm Trusted Publishing

This repository already includes the release workflow:

• .github/workflows/publish-npm.yml

Once Trusted Publishing is configured on npm, future versions can be released through GitHub without local npm publish.

Source Inputs

The design system currently uses:

• BRAND.md
• DESIGN.md

These files act as the upstream source design inputs for the Tooling Layer.