How do I install the Kiss Wireframes skill?

Run npx skillmds@latest add dauquangthanh/kiss-wireframes in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Kiss Wireframes safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Kiss Wireframes?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Kiss Wireframes free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Kiss Wireframes?

dauquangthanh (@dauquangthanh) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Kiss Wireframes by dauquangthanh — Agent Skill

Name: Kiss Wireframes
Author: dauquangthanh

Kiss Wireframes

Drafts text-based wireframes + Mermaid user-flow diagrams for the active feature, from user stories and a named persona. Produces two artefacts: screen sketches + flow diagrams. Does not conduct user research. Use when designing UI screens, mapping user journeys, or creating wireframes and flow diagrams for a feature.

dauquangthanh Updated Sep 17, 2026

File contents

User Input

$ARGUMENTS

Audience and tone (interactive mode)

When KISS_AGENT_MODE=interactive (the default), assume the user has no design or technical background. Run this skill as a guided questionnaire:

One question at a time. No walls of questions.
Yes / no first. Phrase so yes, no, not sure, or skip is a valid answer.
No jargon. Translate to everyday words: "Who's the main user, in one sentence?" not "Define the persona"; "What's the most important button on the screen?" not "What's the primary CTA?"; "What if there's nothing to show yet?" not "What's the empty state?"; "What if it's loading?" not "What's the loading state?".
Examples over abstractions. When asking about the user, give concrete examples ("a busy parent placing a delivery order on their phone in 30 seconds").
Choices, not blank fields. When yes/no isn't enough, offer 2-4 lettered options (A/B/C/D) with one-line everyday descriptions. Always include "Not sure — pick a sensible default".
Always recommend. State the option you would pick and why in one sentence so the user can reply "yes" / "ok" to accept.
not sure / skip triggers a sensible default — mark copy as <TBD>, use the recommended layout, write "(default applied — confirm later)", and log a UXDEBT- entry in ux-debts.md.

When KISS_AGENT_MODE=auto (or --auto), skip the questionnaire entirely: draft wireframes + flows from the spec's user stories, mark unknown copy <TBD>, and log decisions to the ux-designer agent's decision log.

Inputs

.kiss/context.yml
{context.paths.specs}/<feature>/spec.md (user stories)
{context.paths.docs}/product/acceptance.md (AC)

Outputs

{context.paths.docs}/ux/<feature>/wireframes.md
{context.paths.docs}/ux/<feature>/user-flows.md

Context Update

Does not mutate .kiss/context.yml.

Handoffs

kiss-test-cases uses the flows to structure e2e test cases.
developer uses wireframes as the UI contract.

AI authoring scope

Does: draft low-fidelity wireframes as ASCII / structured markdown per screen, render user flows in Mermaid, annotate each screen with the AC it satisfies.

Does not: conduct user interviews, run A/B tests, produce high-fidelity visual design, push to a design tool.

Usage

<SKILL_DIR> = the integration's skills root (e.g. .claude/skills/ for Claude Code, .agents/skills/ for Antigravity / Codex, .cursor/skills/ for Cursor, .windsurf/workflows/ for Windsurf). Scripts live at <SKILL_DIR>/<skill-name>/scripts/….

UX_PERSONA="new customer" bash <SKILL_DIR>/kiss-wireframes/scripts/bash/draft-wireframes.sh --auto

Answer keys

Key	Meaning	Default
`UX_PERSONA`	one-line persona label	`end user`

---name: kiss-wireframesdescription: Drafts text-based wireframes + Mermaid user-flow diagrams for the active feature, from user stories and a named persona. Produces two artefacts: screen sketches + flow diagrams. Does not conduct user research. Use when designing UI screens, mapping user journeys, or creating wireframes and flow diagrams for a feature.---## User Input```text$ARGUMENTS```## Audience and tone (interactive mode)When `KISS_AGENT_MODE=interactive` (the default), assume the userhas **no design or technical background**. Run this skill as aguided questionnaire:- **One question at a time.** No walls of questions.- **Yes / no first.** Phrase so `yes`, `no`, `not sure`, or `skip` is a valid answer.- **No jargon.** Translate to everyday words: "Who's the main user, in one sentence?" not "Define the persona"; "What's the most important button on the screen?" not "What's the primary CTA?"; "What if there's nothing to show yet?" not "What's the empty state?"; "What if it's loading?" not "What's the loading state?".- **Examples over abstractions.** When asking about the user, give concrete examples ("a busy parent placing a delivery order on their phone in 30 seconds").- **Choices, not blank fields.** When yes/no isn't enough, offer 2-4 lettered options (A/B/C/D) with one-line everyday descriptions. Always include "Not sure — pick a sensible default".- **Always recommend.** State the option you would pick and why in one sentence so the user can reply "yes" / "ok" to accept.- **`not sure` / `skip` triggers a sensible default** — mark copy as `<TBD>`, use the recommended layout, write "(default applied — confirm later)", and log a `UXDEBT-` entry in `ux-debts.md`.When `KISS_AGENT_MODE=auto` (or `--auto`), skip the questionnaireentirely: draft wireframes + flows from the spec's user stories,mark unknown copy `<TBD>`, and log decisions to the ux-designeragent's decision log.## Inputs- `.kiss/context.yml`- `{context.paths.specs}/<feature>/spec.md` (user stories)- `{context.paths.docs}/product/acceptance.md` (AC)## Outputs- `{context.paths.docs}/ux/<feature>/wireframes.md`- `{context.paths.docs}/ux/<feature>/user-flows.md`## Context UpdateDoes not mutate `.kiss/context.yml`.## Handoffs- `kiss-test-cases` uses the flows to structure e2e test cases.- `developer` uses wireframes as the UI contract.## AI authoring scope**Does:** draft low-fidelity wireframes as ASCII / structuredmarkdown per screen, render user flows in Mermaid, annotate eachscreen with the AC it satisfies.**Does not:** conduct user interviews, run A/B tests, producehigh-fidelity visual design, push to a design tool.## Usage> `<SKILL_DIR>` = the integration's skills root (e.g. `.claude/skills/`> for Claude Code, `.agents/skills/` for Antigravity / Codex,> `.cursor/skills/` for Cursor, `.windsurf/workflows/` for Windsurf).> Scripts live at `<SKILL_DIR>/<skill-name>/scripts/…`.```bashUX_PERSONA="new customer" bash <SKILL_DIR>/kiss-wireframes/scripts/bash/draft-wireframes.sh --auto```### Answer keys| Key | Meaning | Default ||---|---|---|| `UX_PERSONA` | one-line persona label | `end user` |

Frequently asked questions