Web Design
xiaopu-ai/web-design
Web 视觉设计 SKILL。输入 PRD / 参考 URL / 截图 / 关键词(任意组合),先产出一份标准化 DESIGN.md 设计规范,用户确认后据此生成 UI/UX、视觉、动效、响应式全部达标的 web 代码。专攻 web 端:Landing Page、Portfolio、产品页、博客、个人站、SaaS 介绍页等。当用户说"帮我做个网站""设计一个页面""参考 XX…
Extract structured data from Axure prototypes using Playwright — screenshots, design tokens, interaction maps, annotations, and page text.
The automated check flagged lines worth reading first. See the safety section below.
$ npx skills add lintendo/Axhub-Skills --skill extract-axure-data -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install lintendo/Axhub-Skills extract-axure-data --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/lintendo/Axhub-Skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/extract-axure-data .claude/skills/extract-axure-data && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "extract-axure-data" agent skill from https://github.com/lintendo/Axhub-Skills/tree/main/skills/extract-axure-data into .claude/skills/extract-axure-data/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "extract-axure-data", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/lintendo/Axhub-Skills/tree/main/skills/extract-axure-dataType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add lintendo/Axhub-Skills --skill extract-axure-data -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install lintendo/Axhub-Skills extract-axure-data --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lintendo/Axhub-Skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/extract-axure-data .agents/skills/extract-axure-data && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "extract-axure-data" agent skill from https://github.com/lintendo/Axhub-Skills/tree/main/skills/extract-axure-data into .agents/skills/extract-axure-data/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "extract-axure-data", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add lintendo/Axhub-Skills --skill extract-axure-data -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install lintendo/Axhub-Skills extract-axure-data --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lintendo/Axhub-Skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/extract-axure-data .cursor/skills/extract-axure-data && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "extract-axure-data" agent skill from https://github.com/lintendo/Axhub-Skills/tree/main/skills/extract-axure-data into .cursor/skills/extract-axure-data/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "extract-axure-data", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/lintendo/Axhub-Skills.git --path skills/extract-axure-data--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add lintendo/Axhub-Skills --skill extract-axure-data -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install lintendo/Axhub-Skills extract-axure-data --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lintendo/Axhub-Skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/extract-axure-data .gemini/skills/extract-axure-data && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "extract-axure-data" agent skill from https://github.com/lintendo/Axhub-Skills/tree/main/skills/extract-axure-data into .gemini/skills/extract-axure-data/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "extract-axure-data", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install lintendo/Axhub-Skills extract-axure-dataInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add lintendo/Axhub-Skills --skill extract-axure-data -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/lintendo/Axhub-Skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/extract-axure-data .github/skills/extract-axure-data && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "extract-axure-data" agent skill from https://github.com/lintendo/Axhub-Skills/tree/main/skills/extract-axure-data into .github/skills/extract-axure-data/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "extract-axure-data", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add lintendo/Axhub-Skills --skill extract-axure-data -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install lintendo/Axhub-Skills extract-axure-data --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lintendo/Axhub-Skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/extract-axure-data .opencode/skills/extract-axure-data && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "extract-axure-data" agent skill from https://github.com/lintendo/Axhub-Skills/tree/main/skills/extract-axure-data into .opencode/skills/extract-axure-data/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "extract-axure-data", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
extract-axure-dataExtract structured data from Axure prototypes using Playwright — screenshots, design tokens, interaction maps, annotations, and page text.
Extract Axure Data is an agent skill from lintendo/Axhub-Skills. Extract structured data from Axure prototypes using Playwright — screenshots, design tokens, interaction maps, annotations, and page text. Use this skill whenever the user wants to extract data from an Axure prototype, reconstruct or clone an Axure page, analyze Axure design tokens, export Axure content, or work with Axure prototype URLs (even if they don't say "Axure" explicitly — look for AxShare links, /start.htmlp= URLs, /start.html?id=...&p=... URLs, or mentions of wireframes/prototypes hosted online).
Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including scripts.
It sits in Frontend & Design, covering Design tokens, Browser testing and UI design. It works with Playwright. The licence is MIT.
Read from SKILL.md and the folder at commit 1e1c5bc. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Ships 2 files in scripts/ (JavaScript), which the agent can run.
Shell commands in SKILL.md call:
nodenpxnpmcurlFrom the folder's file list and the shell code blocks in SKILL.md.
Hosts in commands or code, which the agent is likely to contact:
npmmirror.comAlso links to:
github.comFrom URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Extract Axure Data loads about 1.9k tokens when it runs. Until then it costs about 133 tokens; SKILL.md has 540 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found patterns that need a careful read before installing.
**Connect to an existing Chrome session** (recommended — reuses cookies):Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
The full file from lintendo/Axhub-Skills at commit 1e1c5bc, republished under its MIT licence (© lintendo). 540 words, ~1,912 tokens.
.claude/skills/extract-axure-data/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.Extract structured data from Axure prototypes for page reconstruction, content analysis, or design review. The script handles dependency installation automatically — just point it at a URL.
start.html#p= or start.html?id=...&p=...Axure stores page data in static JS files (data/document.js, files/{page}/data.js). The script parses these directly in Node.js without needing a browser — this is fast and works for sitemap, interactions, and annotations. Screenshots and design tokens require rendering, so Playwright launches a Chromium instance for those. For Axure preview URLs that route through start.html?id=...&p=..., the script first resolves the rendered frame URL so page data, screenshots, and text are extracted from the correct page resource directory.
Run the extraction script from scripts/extract.mjs relative to this skill directory.
# Basic extraction — screenshot + design tokens (default)
node scripts/extract.mjs <AXURE_URL> --all
# Full extraction — add interactions, annotations, page text
node scripts/extract.mjs <AXURE_URL> --all --advanced
# Specific pages only
node scripts/extract.mjs <AXURE_URL> --pages login,dashboardFirst run auto-installs Playwright + Chromium to ~/.cache/axure-extractor/. This takes 1-2 minutes and happens once.
| Flag | What it does | Default |
|---|---|---|
<url> | Axure prototype URL (required) | — |
--all | Process all pages | first page only |
--advanced | Add interactions, annotations, page text | off |
-o DIR | Output directory | ./axure-export |
--pages P1,P2 | Process only named pages | — |
--no-screenshot | Skip screenshots | screenshots on |
--no-headless | Show browser window | headless |
--connect-cdp URL | Attach to running Chrome (for auth) | — |
--verbose | Detailed logging | off |
axure-export/
├── sitemap.json # Page tree and hierarchy (always produced)
└── pages/{pageName}/
├── screenshot.png # Page screenshot
├── theme.json # Design tokens (colors, fonts, spacing, radii)
├── data.json # Page metadata and diagram (--advanced)
├── notes.json # Component annotations (--advanced)
├── interactions.json # Event map (clicks, navigations) (--advanced)
└── content.md # Rendered page text as Markdown (--advanced)When the goal is to rebuild an Axure prototype as a real web page, use a two-step approach. The reason for splitting is that screenshots + theme tokens are enough for ~80% visual fidelity, and the additional data only helps when fine-tuning details — so extracting everything upfront wastes time if the basic result is already good.
Step 1 — Basic extraction:
node scripts/extract.mjs <URL> --pages <target>Use screenshot.png as the visual reference and theme.json for exact colors, fonts, and spacing. Build the page.
Step 2 — Refine if needed:
node scripts/extract.mjs <URL> --pages <target> --advancedIf interactions are missing or annotations are wrong, the additional files (interactions.json, notes.json, content.md) provide the detail to fix them.
Some Axure prototypes require login (AxShare, corporate SSO). Two approaches:
Connect to an existing Chrome session (recommended — reuses cookies):
macOS:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222Windows:
start chrome --remote-debugging-port=9222Then log in via that Chrome window and run:
node scripts/extract.mjs <URL> --all --connect-cdp http://localhost:9222Show the browser window (manual login during extraction):
node scripts/extract.mjs <URL> --all --no-headlessThe script auto-installs on first run. If it fails:
# Manual install
cd ~/.cache/axure-extractor # macOS/Linux
# or: cd %USERPROFILE%\.cache\axure-extractor (Windows)
npm install playwright
npx playwright install chromium
# If Chromium download is slow (e.g. behind GFW):
PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwright npx playwright install chromiumIf Playwright can't be installed at all, the script degrades gracefully — it still extracts sitemap, page data, annotations, and interactions (everything that doesn't need a browser), but skips screenshots and theme tokens.
Design system tokens extracted from computed styles:
{
"colors": {
"background": [{"value": "rgb(255,255,255)", "count": 42, "tags": ["div"]}],
"text": [{"value": "rgb(51,51,51)", "count": 28, "tags": ["p","span"]}],
"border": [{"value": "rgb(221,221,221)", "count": 12}]
},
"typography": {
"families": [{"value": "\"PingFang SC\", sans-serif", "count": 56}],
"textStyles": [{"size": "14px", "lineHeight": "22px", "weight": "400", "count": 20}]
},
"spacing": [{"value": "16px", "count": 15}],
"radius": [{"value": "4px", "count": 8}]
}Component annotations authored in Axure:
{
"page": {"description": "User login page"},
"id-username-input": {"description": "Username field", "placeholder": "Enter username"},
"id-submit-btn": {"description": "Login button", "action": "Submit form"}
}Event mappings defined in Axure's interaction designer:
{
"onClick": {"targetPage": "dashboard", "action": "navigate"}
}导出数据基于静态 JS 解析和快照采集,某些动态内容(交互状态、条件面板、动态面板切换等)可能不完整。可使用 Playwright CLI 回到原型页面补充采集。
# 打开 Axure 原型
playwright-cli open <AXURE_URL>
playwright-cli snapshot
# 点击交互元素查看动态面板切换
playwright-cli click e12
playwright-cli screenshot --filename=panel-state-2.png
# 获取元素的精确样式
playwright-cli eval "el => getComputedStyle(el).cssText" e5
playwright-cli close完整命令参考: Playwright CLI 官方技能文档
| 场景 | Playwright 做什么 |
|---|---|
| 动态面板状态 | 点击触发切换后截图 |
| 条件显示/隐藏 | 触发条件后采集 DOM |
| 交互动画 | 录制交互过程 |
| 需要登录的原型 | 复用已登录的 Chrome 会话 |
| Axure 母版内容 | 进入页面后完整采集 |
| Problem | Fix |
|---|---|
HTTP 404: .../data/document.js | URL isn't an Axure prototype, or wrong base URL |
Sitemap 提取失败 | Check URL is reachable: curl -I <url> |
| Screenshots are blank | Page needs longer to render — try --no-headless to watch |
| Need login | Use --connect-cdp (see Authenticated prototypes above) |
| Playwright install fails | Manual install, or set PLAYWRIGHT_DOWNLOAD_HOST for mirror |
© lintendo, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 2 other files (scripts) in skills/extract-axure-data of lintendo/Axhub-Skills.
Open the folder on GitHubat commit 1e1c5bc
Extract Axure Data next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Extract Axure Data this skilllintendo/Axhub-Skills | 130 | — | ~1.9k | Automated safety check: Warn | MIT | |
| Web Designxiaopu-ai/web-design | 783 | — | ~3k | Automated safety check: Pass | MIT | |
| Website Design Taste Extractorsenlindesign/taste-skill | 385 | — | ~5.3k | Automated safety check: Pass | None | |
| Add Generation To GallerySunkenInTime/which-ai | 129 | — | ~2k | Automated safety check: Pass | None | |
| Liteyuki Webui FrontendLiteyukiStudio/LiteyukiBot | 157 | — | ~2.5k | Automated safety check: Pass | Custom licence | |
| Igniteui Angular Figma To AppIgniteUI/igniteui-angular | 599 | — | ~6.4k | Automated safety check: Pass | MIT |
xiaopu-ai/web-design
Web 视觉设计 SKILL。输入 PRD / 参考 URL / 截图 / 关键词(任意组合),先产出一份标准化 DESIGN.md 设计规范,用户确认后据此生成 UI/UX、视觉、动效、响应式全部达标的 web 代码。专攻 web 端:Landing Page、Portfolio、产品页、博客、个人站、SaaS 介绍页等。当用户说"帮我做个网站""设计一个页面""参考 XX…
senlindesign/taste-skill
Reverse-engineers a website's design from its URL into a Markdown and JSON pair holding concrete tokens and the trade-offs behind the look.
SunkenInTime/which-ai
Add a generated regular Next.js source app into the ui-design-bench static gallery as a model generation, including source placement, variant wrapper, manifest/registry/type updates, scoped CSS…
LiteyukiStudio/LiteyukiBot
Build, review, or test LiteyukiBot v7's React/Vite WebUI under webui/ and its packaged static delivery in packages/webui/.
IgniteUI/igniteui-angular
Builds Angular views from Figma designs with Ignite UI for Angular, supporting Indigo.Design kits, third-party kits, and plain frames.
espennilsen/pi
Reverse-engineer a design system from a live website (public URL or localhost).
lintendo/Axhub-Skills
A skill your agent uses when 需要把现有 React、Vite、Next.js、V0 或 AI Studio 页面转换为 Figma Make 可导入的 .fig 资产,或补齐、更新、验证已有 Figma Make 导出壳和 canvas.fig。
lintendo/Axhub-Skills
A skill your agent uses when selecting an existing design system or theme for a product, page, prototype, or implementation through Axhub design knowledge indexes; not when creating or updating a…
lintendo/Axhub-Skills
A skill your agent uses when an annotated prototype URL exposes PRD, directory, annotation, or source context that an AI Agent needs for review, implementation planning, production work, source…
lintendo/Axhub-Skills
高精度克隆网页。使用 Playwright 渐进式采集页面数据(DOM 结构、样式、截图、资源), 然后分阶段构建完整的 HTML/CSS 还原。支持快速还原和高精度还原两种模式。
lintendo/Axhub-Skills
Extract structured data from any web page using Playwright — screenshots, design tokens, page text as Markdown, interactive element maps, and full page data packs.
lintendo/Axhub-Skills
用于处理涉及检查、读取、创建、编辑、导出或代码映射的 Figma 内容任务,也用于将 HTML/React/Vue 等网页复制到 Figma,尤其适用于当前选区、设计系统、Figma MCP、Drafito、Figwright 或需要避免 MCP 工具污染上下文的场景。当用户需要可批注 Figma 链接或要求同时绑定工作目录时,也应与 axhub-commentary 组合。
Works with
Categories
Extract structured data from Axure prototypes using Playwright — screenshots, design tokens, interaction maps, annotations, and page text. Extract Axure Data is an agent skill from lintendo/Axhub-Skills. Extract structured data from Axure prototypes using Playwright — screenshots, design tokens, interaction maps, annotations, and page text.
Extract Axure Data fits situations like: the user wants to extract data from an Axure prototype; clone an Axure page; analyze Axure design tokens; export Axure content.
Run `npx skills add lintendo/Axhub-Skills --skill extract-axure-data -a claude-code`. Or copy the skill folder (skills/extract-axure-data in lintendo/Axhub-Skills) into .claude/skills/extract-axure-data in your project. Claude Code loads it when a task matches its description.
Run `npx skills add lintendo/Axhub-Skills --skill extract-axure-data -a codex`. Or copy the skill folder (skills/extract-axure-data in lintendo/Axhub-Skills) into .agents/skills/extract-axure-data in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add lintendo/Axhub-Skills --skill extract-axure-data -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/extract-axure-data, .gemini/skills/extract-axure-data, .github/skills/extract-axure-data and .opencode/skills/extract-axure-data in your project.
Going by SKILL.md and its folder, Extract Axure Data needs JavaScript for the scripts in its folder and the command-line tools its instructions call (node, npx, npm and curl). Our summary lists: Node.js.
SKILL.md names 2 domains. In commands or code: npmmirror.com; the agent is likely to contact it when it follows the instructions. As links in the text: github.com. This is read from the text; nothing was executed.
Our automated static check of SKILL.md flagged 1 warning(s): mentions a credentials file (ssh keys, cloud or package-manager tokens). Read the flagged lines before installing; the check is not a guarantee either way. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
Extract Axure Data is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 1.9k tokens (SKILL.md is roughly 7.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Extract Axure Data: Web Design (xiaopu-ai/web-design, 783 stars), Website Design Taste Extractor (senlindesign/taste-skill, 385 stars), Add Generation To Gallery (SunkenInTime/which-ai, 129 stars) and Liteyuki Webui Frontend (LiteyukiStudio/LiteyukiBot, 157 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
lintendo (a GitHub user) maintains it in lintendo/Axhub-Skills, which has 130 GitHub stars. The repository holds 13 skills in this directory. The repository was last updated on August 21, 2026.
Source: lintendo/Axhub-Skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.