website-to-design-md

これはレビュー時に保存された抜粋です。完全で最新の内容は外部ソースを確認してください。

---
name: website-to-design-md
description: Generate a reusable design.md or DESIGN.md from a live website by deeply inspecting the site with `agent-browser` and `agent-browser eval`, then synthesizing its visual language, layout system, interaction patterns, and content style into a structured markdown design system. Use when given one or more website URLs and asked to analyze a site, reverse-engineer its design, extract its look and feel, write DESIGN.md, create a style guide, or capture a site's UI rules for later AI-assisted design or implementation. Prefer this skill when the goal is documentation rather than rebuilding the page in code. Always use `agent-browser` as the primary browser runtime; if it is missing, help the user install or expose it instead of switching platforms or browser stacks.
---

<!--
[INPUT]: 实时网站 URL、浏览器自动化证据采集约束与 DESIGN.md 输出契约。
[OUTPUT]: 面向 AI 代理的 `website-to-design-md` 执行协议与交付规范。
[POS]: 位于 `/plugins/kata-design/skills/website-to-design-md`，作为该 skill 的机器可读入口。

[PROTOCOL]:
1. 一旦本文件被更新，务必同步更新 Header 与所属目录 `.folder.md`。
2. 若提取流程、输出结构或浏览器工具约束变化，需同步回写 README、references 与 scripts 说明。
-->

# website-to-design-md

## Overview

Use this skill to turn a real website into a reusable `design.md` or `DESIGN.md` document plus a companion HTML preview.

The goal is not to clone the site. The goal is to inspect it deeply enough that another agent can recreate the same design language, content tone, and interaction feel without needing to see the original website.

The HTML preview is a practical review surface. It should translate the markdown into a glanceable design board so the user can inspect palette, typography, spacing, component cues, and the raw markdown source without reopening the site.

## Universal Browser Rule

This skill should always use `agent-browser` first.

- Use `agent-browser open`, `agent-browser wait`, and especially `agent-browser eval` as the primary extraction workflow.
- Do not start by checking which app or platform the user is on.
- Do not branch logic based on whether the user is using Codex, Trae, Claude, Cursor, or another host.
- Do not start by checking whether the current project folder contains Playwright, Chrome CLI, or a local browser package.
- If `agent-browser` is unavailable, help the user install it or expose it on `PATH`, then continue with the same workflow.
- Do not silently switch to Playwright, Chrome CLI, or screenshot-led extraction unless the user explicitly asks for a separate fallback.

## Working Style

Work browser-first and evidence-first.

- Prefer `agent-browser` over raw HTML fetches. A live website often hides important behavior behind hydration, scroll state, hover state, or responsive layout changes.
- Treat `agent-browser eval` as the primary extraction layer. The main evidence should come from DOM structure, rendered HTML, computed styles, CSS variables, readable stylesheet rules, and interaction states gathered inside the browser runtime.
- Do not use screenshots as a default evidence source. When `agent-browser eval` or an equivalent page-eval path is available, use DOM, computed styles, CSS variables, readable stylesheet rules, and extracted text as the primary evidence.
- Only use screenshots as an optional last-resort cross-check when DOM evidence is insufficient or the user explicitly asks for a visual verification pass.
- Do not silently fall back to Playwright or Chrome CLI. If `agent-browser` is unavailable, detect that explicitly and help the user install or expose it.
- Treat static source files as supporting evidence, not the main truth source.
- Translate technical details into design language. Do not dump CSS blindly; synthesize it into something an agent can actually use.
- Distinguish observed facts from inference. If something is a judgment or a likely rule rather than a directly observed value, label it clearly.
- Treat the HTML preview as part of the default deliverable, not as an optional extra, unless the user explicitly opts o