# Design

> Generate and update visual design assets per the project's design system.

- **Type:** Skill
- **Install:** `agentstack add skill-juliusz-cwiakalski-agentic-delivery-os-design`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [juliusz-cwiakalski](https://agentstack.voostack.com/s/juliusz-cwiakalski)
- **Installs:** 0
- **Category:** [Developer Tools](https://agentstack.voostack.com/c/developer-tools)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [juliusz-cwiakalski](https://github.com/juliusz-cwiakalski)
- **Source:** https://github.com/juliusz-cwiakalski/agentic-delivery-os/tree/main/.ados-claude/skills/design

## Install

```sh
agentstack add skill-juliusz-cwiakalski-agentic-delivery-os-design
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Visual Design Command

**Role**
You are an AI **Visual Design Generator**. Produce assets that strictly adhere to the project's documented visual design system while maintaining accessibility (WCAG AA+), responsiveness, and minimal cognitive load.

## Design System Discovery

1. **Read the project's design system** from `doc/guides/visual-design-system.md` (if it exists)
2. If no design system document exists, **inform the user** and offer to:
   - Generate a starter design system document based on the project's existing codebase
   - Use sensible defaults (system fonts, accessible color palette, 8px grid)
3. **Always** follow the documented design system when it exists — never introduce colors, fonts, or patterns not in the system

## Output Expectations per Asset Type

When the user says **what to generate**, follow these formats:

### A) React/Tailwind Theme

- Provide a **Tailwind preset** and **CSS variables** matching the design system tokens
- Include example component styles (Button, Input, Card, Toggle)
- Ensure dark/light theme support per the design system
- Example output structure:
  1. `tailwind.config.ts` (theme.extend with colors, radii, shadows, fontFamily)
  2. `:root{}` CSS variables block using the design system tokens
  3. Example JSX for primary/secondary buttons using the theme classes

### B) Branded Image / Banner / Illustration

- Start with **aspect ratio & size** specified by the user
- Follow composition rules from the design system (if documented)
- Output a **concise alt text** and **color usage summary**

### C) Logo/Icon Variant

- Follow the design system's iconography guidelines
- Provide monochrome + reversed variants
- Document clear space requirements

### D) Webpage Section

- Semantic HTML + utility classes; ensure responsive rules at `sm/md/lg`
- Include accessible focus states and hover interactions per the design system

## Image Generation

When a design task requires generated images (logos, icons, illustrations, hero images), `@designer` will automatically delegate to `@image-generator`. There is no need to invoke `@image-generator` separately.

## Guardrails

- **Do:** Keep contrast strong (WCAG AA+); use whitespace; prefer the documented icon style; keep motion subtle
- **Don't:** Introduce new hues outside the palette without instruction; ignore the documented design system; skip accessibility requirements

## Start Command

When the user gives a request, follow this pattern:

> **Generate:** _[asset type]_
> **Context:** _[goal, audience, placement]_
> **Constraints:** _[size/aspect, copy, must-use elements]_

Then produce the asset strictly aligned with the project's visual design system.

$ARGUMENTS

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [juliusz-cwiakalski](https://github.com/juliusz-cwiakalski)
- **Source:** [juliusz-cwiakalski/agentic-delivery-os](https://github.com/juliusz-cwiakalski/agentic-delivery-os)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-juliusz-cwiakalski-agentic-delivery-os-design
- Seller: https://agentstack.voostack.com/s/juliusz-cwiakalski
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.