Xpersona

Crawler Summary

design-to-code-expert answer-first brief

HTML design-to-code restoration skill for local .html mockups. Use when users ask to restore, replicate, rebuild, or pixel-match a design draft into the current project stack and language. Triggers include: 还原设计稿, HTML还原, 复刻页面, 像素级还原, design to code, restore UI, replicate page, convert html mockup, implement from html file, React, Next.js, Vue, Nuxt, Taro, Svelte, vanilla frontend. --- name: design-to-code-expert description: "HTML design-to-code restoration skill for local .html mockups. Use when users ask to restore, replicate, rebuild, or pixel-match a design draft into the current project stack and language. Triggers include: 还原设计稿, HTML还原, 复刻页面, 像素级还原, design to code, restore UI, replicate page, convert html mockup, implement from html file, React, Next.js, Vue, Nuxt, Taro, Svelte, vanilla Capability contract not published. No trust telemetry is available yet. 4 GitHub stars reported by the source. Last updated 4/15/2026.

Freshness

Last checked 4/15/2026

Best For

design-to-code-expert is best for general automation workflows where OpenClaw compatibility matters.

Not Ideal For

Contract metadata is missing or unavailable for deterministic execution.

Evidence Sources Checked

editorial-content, GITHUB OPENCLEW, runtime-metrics, public facts pack

CardFactsSnapshotContractTrust
Claim this agent
Agent DossierGitHubSafety: 94/100

design-to-code-expert

HTML design-to-code restoration skill for local .html mockups. Use when users ask to restore, replicate, rebuild, or pixel-match a design draft into the current project stack and language. Triggers include: 还原设计稿, HTML还原, 复刻页面, 像素级还原, design to code, restore UI, replicate page, convert html mockup, implement from html file, React, Next.js, Vue, Nuxt, Taro, Svelte, vanilla frontend. --- name: design-to-code-expert description: "HTML design-to-code restoration skill for local .html mockups. Use when users ask to restore, replicate, rebuild, or pixel-match a design draft into the current project stack and language. Triggers include: 还原设计稿, HTML还原, 复刻页面, 像素级还原, design to code, restore UI, replicate page, convert html mockup, implement from html file, React, Next.js, Vue, Nuxt, Taro, Svelte, vanilla

OpenClawself-declared

Public facts

5

Change events

1

Artifacts

0

Freshness

Apr 15, 2026

Verifiededitorial-contentNo verified compatibility signals4 GitHub stars

Capability contract not published. No trust telemetry is available yet. 4 GitHub stars reported by the source. Last updated 4/15/2026.

4 GitHub starsTrust evidence available

Trust score

Unknown

Compatibility

OpenClaw

Freshness

Apr 15, 2026

Vendor

Bianxuerui

Artifacts

0

Benchmarks

0

Last release

Unpublished

Executive Summary

Key links, install path, and a quick operational read before the deeper crawl record.

Verifiededitorial-content

Summary

Capability contract not published. No trust telemetry is available yet. 4 GitHub stars reported by the source. Last updated 4/15/2026.

View Source

Setup snapshot

git clone https://github.com/bianxuerui/design-to-code-expert.git
  1. 1

    Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.

  2. 2

    Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Evidence Ledger

Everything public we have scraped or crawled about this agent, grouped by evidence type with provenance.

Verifiededitorial-content
Vendor (1)

Vendor

Bianxuerui

profilemedium
Observed Apr 15, 2026Source linkProvenance
Compatibility (1)

Protocol compatibility

OpenClaw

contractmedium
Observed Apr 15, 2026Source linkProvenance
Adoption (1)

Adoption signal

4 GitHub stars

profilemedium
Observed Apr 15, 2026Source linkProvenance
Security (1)

Handshake status

UNKNOWN

trustmedium
Observed unknownSource linkProvenance
Integration (1)

Crawlable docs

6 indexed pages on the official domain

search_documentmedium
Observed Apr 15, 2026Source linkProvenance

Release & Crawl Timeline

Merged public release, docs, artifact, benchmark, pricing, and trust refresh events.

Self-declaredagent-index

Docs Update

Docs refreshed: Sign in to GitHub · GitHub

search_documentmedium

Fresh crawlable documentation was indexed for the official domain.

Observed Apr 15, 2026

Artifacts Archive

Extracted files, examples, snippets, parameters, dependencies, permissions, and artifact metadata.

Self-declaredGITHUB OPENCLEW

Extracted files

0

Examples

3

Snippets

0

Languages

typescript

Parameters

Executable Examples

bash

python3 scripts/detect_stack.py --project-root .

bash

python3 scripts/inspect_html.py --html "<design_html_path>"

bash

python3 scripts/suggest_target_path.py --project-root . --scope <scope> --framework <framework> --name <name> --overwrite <overwrite>

Docs & README

Full documentation captured from public sources, including the complete README when available.

Self-declaredGITHUB OPENCLEW

Docs source

GITHUB OPENCLEW

Editorial quality

ready

HTML design-to-code restoration skill for local .html mockups. Use when users ask to restore, replicate, rebuild, or pixel-match a design draft into the current project stack and language. Triggers include: 还原设计稿, HTML还原, 复刻页面, 像素级还原, design to code, restore UI, replicate page, convert html mockup, implement from html file, React, Next.js, Vue, Nuxt, Taro, Svelte, vanilla frontend. --- name: design-to-code-expert description: "HTML design-to-code restoration skill for local .html mockups. Use when users ask to restore, replicate, rebuild, or pixel-match a design draft into the current project stack and language. Triggers include: 还原设计稿, HTML还原, 复刻页面, 像素级还原, design to code, restore UI, replicate page, convert html mockup, implement from html file, React, Next.js, Vue, Nuxt, Taro, Svelte, vanilla

Full README

name: design-to-code-expert description: "HTML design-to-code restoration skill for local .html mockups. Use when users ask to restore, replicate, rebuild, or pixel-match a design draft into the current project stack and language. Triggers include: 还原设计稿, HTML还原, 复刻页面, 像素级还原, design to code, restore UI, replicate page, convert html mockup, implement from html file, React, Next.js, Vue, Nuxt, Taro, Svelte, vanilla frontend."

Design to Code Expert

Overview

Execute a deterministic, confirmation-first workflow to restore a local HTML design draft into the current project codebase.

  • Start with analysis, not code generation.
  • Auto-detect project stack and language first.
  • Ask for confirmation at required checkpoints unless the user explicitly chooses --quick.
  • Keep implementation consistent by using scripts and reference files.

Inputs and Options

Required input:

  • design_html_path: local .html file path.

Optional options (full spec in references/argument-spec.md):

  • --target <path>: explicit output file path.
  • --scope <page|component|section>: implementation scope.
  • --framework <auto|next|react|nuxt|vue|taro|svelte|vanilla>: framework override.
  • --style <auto|tailwind|css-modules|scss|less|styled-components|emotion|css>: style system override.
  • --mode <strict|balanced|quick>: fidelity mode.
  • --name <ComponentName>: component/page naming hint.
  • --overwrite <ask|replace|patch|new>: file conflict behavior.
  • --dry-run: analyze and plan only.
  • --check-only: run checks only; no file edits.

Parse and conflict rules:

  • Load references/argument-spec.md before parsing options.
  • Precedence: explicit option overrides auto-detection, and auto-detection overrides defaults.

Workflow

Copy this checklist and mark items while executing:

  • [ ] Step 0: Validate local HTML input BLOCKING
  • [ ] Step 1: Detect project stack BLOCKING
  • [ ] Step 2: Inspect HTML structure and tokens
  • [ ] Step 3: Build restoration strategy from mappings
  • [ ] Step 4: Confirm plan with user REQUIRED
  • [ ] Step 5: Implement restoration in target files
  • [ ] Step 6: Run quality gates
  • [ ] Step 7: Run pre-delivery checklist REQUIRED
  • [ ] Step 8: Produce structured delivery output
  • [ ] Step 9: Ask next-step fix scope REQUIRED

Step 0: Validate local HTML input BLOCKING

  • Verify design_html_path exists and is readable.
  • Verify file extension is .html.
  • If invalid, stop and ask user for a valid local HTML file.
  • If --check-only is set, continue with analysis but do not write code.

Step 1: Detect project stack BLOCKING

  • Run:
python3 scripts/detect_stack.py --project-root .
  • If user passes framework/style overrides, apply them after detection.
  • Read detection output fields: framework, language, style_system, package_manager, confidence, evidence.
  • Load references/stack-detection.md for confidence thresholds and fallback behavior.
  • If confidence is low and no explicit override exists, require user confirmation before coding.

Step 2: Inspect HTML structure and tokens

  • Run:
python3 scripts/inspect_html.py --html "<design_html_path>"
  • Parse output fields for:
    • Structural summary (top_tags, semantic_sections, repeated classes).
    • Visual tokens (colors, font_sizes, spacings, radii, shadows).
    • Interaction points (buttons, links, form controls, click targets).
  • Load references/html-analysis-questions.md and answer the questions explicitly before coding.

Step 3: Build restoration strategy from mappings

  • Select framework mapping file based on detected or overridden framework:
    • references/framework-mapping-react-next.md
    • references/framework-mapping-vue-nuxt.md
    • references/framework-mapping-taro.md
    • references/framework-mapping-svelte.md
    • references/framework-mapping-vanilla.md
  • Load references/style-system-mapping.md to map styles into target styling approach.
  • Run target path suggestion:
python3 scripts/suggest_target_path.py --project-root . --scope <scope> --framework <framework> --name <name> --overwrite <overwrite>
  • Convert analysis into a concrete file-level implementation plan.

Step 4: Confirm plan with user REQUIRED

  • Load references/confirmation-gates.md.
  • Present and confirm all required items:
    • Detected stack and style system.
    • Target file path(s) and overwrite mode.
    • Scope and fidelity mode.
    • Any known limitations from HTML source.
  • Skip this step only when user explicitly passes --quick and mode is not strict.

Step 5: Implement restoration in target files

  • Implement only after Step 4 is confirmed (unless valid --quick path).
  • Follow selected framework mapping and style system mapping.
  • Respect scope:
    • page: full page structure.
    • component: reusable component extraction.
    • section: bounded section implementation.
  • If --dry-run or --check-only is set, output intended changes without writing files.

Step 6: Run quality gates

  • Run available checks based on project toolchain:
    • Lint if configured.
    • Type check if TypeScript is used.
    • Build or compile check if available.
  • If checks fail, summarize blocker issues first, then non-blockers.

Step 7: Run pre-delivery checklist REQUIRED

  • Load:
    • references/pre-delivery-checklist.md
    • references/severity-matrix.md
  • Evaluate output and classify deviations as P0-P3.
  • P0 or unresolved P1 requires explicit user sign-off before completion.

Step 8: Produce structured delivery output

  • Load references/output-template.md.
  • Report:
    • Stack detection result and confidence.
    • HTML analysis summary.
    • Changed file list.
    • Fidelity deviations with severity.
    • Risks, assumptions, and follow-up actions.

Step 9: Ask next-step fix scope REQUIRED

After delivery, ask user how to proceed:

  1. Fix all deviations.
  2. Fix P0/P1 only.
  3. Fix specific items.
  4. Stop with current result.

Do not continue modifications until user selects one option.

Output Contract

Always output in this order:

  1. Detection summary.
  2. Implementation plan.
  3. Files changed or planned.
  4. Deviation grading P0-P3.
  5. Next-step decision request.

Resource Loading Index

| Resource | Load When | | --- | --- | | references/argument-spec.md | Before option parsing in Inputs phase | | references/workflow-checklist.md | At workflow start for progress tracking | | references/stack-detection.md | Step 1 confidence and fallback decisions | | references/html-analysis-questions.md | Step 2 analysis before coding | | references/framework-mapping-react-next.md | Step 3 when framework is React or Next | | references/framework-mapping-vue-nuxt.md | Step 3 when framework is Vue or Nuxt | | references/framework-mapping-taro.md | Step 3 when framework is Taro | | references/framework-mapping-svelte.md | Step 3 when framework is Svelte | | references/framework-mapping-vanilla.md | Step 3 when framework is Vanilla | | references/style-system-mapping.md | Step 3 style mapping | | references/confirmation-gates.md | Step 4 confirmation checkpoint | | references/pre-delivery-checklist.md | Step 7 quality verification | | references/severity-matrix.md | Step 7 severity grading | | references/output-template.md | Step 8 structured result output |

Resources

  • references/
    • argument-spec.md
    • workflow-checklist.md
    • stack-detection.md
    • html-analysis-questions.md
    • framework-mapping-react-next.md
    • framework-mapping-vue-nuxt.md
    • framework-mapping-taro.md
    • framework-mapping-svelte.md
    • framework-mapping-vanilla.md
    • style-system-mapping.md
    • confirmation-gates.md
    • pre-delivery-checklist.md
    • severity-matrix.md
    • output-template.md
  • scripts/
    • detect_stack.py
    • inspect_html.py
    • suggest_target_path.py

Contract & API

Machine endpoints, protocol fit, contract coverage, invocation examples, and guardrails for agent-to-agent use.

MissingGITHUB OPENCLEW

Endpoints

Dossier APISnapshot APIContract APITrust API

Contract coverage

Status

missing

Auth

None

Streaming

No

Data region

Unspecified

Protocol support

OpenClaw: self-declared

Requires: none

Forbidden: none

Guardrails

Operational confidence: low

No positive guardrails captured.
Invocation examples
curl -s "https://xpersona.co/api/v1/agents/bianxuerui-design-to-code-expert/snapshot"
curl -s "https://xpersona.co/api/v1/agents/bianxuerui-design-to-code-expert/contract"
curl -s "https://xpersona.co/api/v1/agents/bianxuerui-design-to-code-expert/trust"

Reliability & Benchmarks

Trust and runtime signals, benchmark suites, failure patterns, and practical risk constraints.

Missingruntime-metrics

Trust signals

Handshake

UNKNOWN

Confidence

unknown

Attempts 30d

unknown

Fallback rate

unknown

Runtime metrics

Observed P50

unknown

Observed P95

unknown

Rate limit

unknown

Estimated cost

unknown

Do not use if

Contract metadata is missing or unavailable for deterministic execution.
No benchmark suites or observed failure patterns are available.

Media & Demo

Every public screenshot, visual asset, demo link, and owner-provided destination tied to this agent.

Missingno-media
No screenshots, media assets, or demo links are available.

Related Agents

Neighboring agents from the same protocol and source ecosystem for comparison and shortlist building.

Self-declaredprotocol-neighbors
GITHUB_REPOSactivepieces

Rank

70

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

Traction

No public download signal

Freshness

Updated 2d ago

OPENCLAW
GITHUB_REPOScherry-studio

Rank

70

AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs

Traction

No public download signal

Freshness

Updated 5d ago

MCPOPENCLAW
GITHUB_REPOSAionUi

Rank

70

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

Traction

No public download signal

Freshness

Updated 6d ago

MCPOPENCLAW
GITHUB_REPOSCopilotKit

Rank

70

The Frontend for Agents & Generative UI. React + Angular

Traction

No public download signal

Freshness

Updated 23d ago

OPENCLAW
Agent hubMore from this sourceOpenClaw agents
Machine Appendix

Contract JSON

{
  "contractStatus": "missing",
  "authModes": [],
  "requires": [],
  "forbidden": [],
  "supportsMcp": false,
  "supportsA2a": false,
  "supportsStreaming": false,
  "inputSchemaRef": null,
  "outputSchemaRef": null,
  "dataRegion": null,
  "contractUpdatedAt": null,
  "sourceUpdatedAt": null,
  "freshnessSeconds": null
}

Invocation Guide

{
  "preferredApi": {
    "snapshotUrl": "https://xpersona.co/api/v1/agents/bianxuerui-design-to-code-expert/snapshot",
    "contractUrl": "https://xpersona.co/api/v1/agents/bianxuerui-design-to-code-expert/contract",
    "trustUrl": "https://xpersona.co/api/v1/agents/bianxuerui-design-to-code-expert/trust"
  },
  "curlExamples": [
    "curl -s \"https://xpersona.co/api/v1/agents/bianxuerui-design-to-code-expert/snapshot\"",
    "curl -s \"https://xpersona.co/api/v1/agents/bianxuerui-design-to-code-expert/contract\"",
    "curl -s \"https://xpersona.co/api/v1/agents/bianxuerui-design-to-code-expert/trust\""
  ],
  "jsonRequestTemplate": {
    "query": "summarize this repo",
    "constraints": {
      "maxLatencyMs": 2000,
      "protocolPreference": [
        "OPENCLEW"
      ]
    }
  },
  "jsonResponseTemplate": {
    "ok": true,
    "result": {
      "summary": "...",
      "confidence": 0.9
    },
    "meta": {
      "source": "GITHUB_OPENCLEW",
      "generatedAt": "2026-04-16T23:40:16.836Z"
    }
  },
  "retryPolicy": {
    "maxAttempts": 3,
    "backoffMs": [
      500,
      1500,
      3500
    ],
    "retryableConditions": [
      "HTTP_429",
      "HTTP_503",
      "NETWORK_TIMEOUT"
    ]
  }
}

Trust JSON

{
  "status": "unavailable",
  "handshakeStatus": "UNKNOWN",
  "verificationFreshnessHours": null,
  "reputationScore": null,
  "p95LatencyMs": null,
  "successRate30d": null,
  "fallbackRate": null,
  "attempts30d": null,
  "trustUpdatedAt": null,
  "trustConfidence": "unknown",
  "sourceUpdatedAt": null,
  "freshnessSeconds": null
}

Capability Matrix

{
  "rows": [
    {
      "key": "OPENCLEW",
      "type": "protocol",
      "support": "unknown",
      "confidenceSource": "profile",
      "notes": "Listed on profile"
    }
  ],
  "flattenedTokens": "protocol:OPENCLEW|unknown|profile"
}

Facts JSON

[
  {
    "factKey": "docs_crawl",
    "category": "integration",
    "label": "Crawlable docs",
    "value": "6 indexed pages on the official domain",
    "href": "https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar",
    "sourceUrl": "https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar",
    "sourceType": "search_document",
    "confidence": "medium",
    "observedAt": "2026-04-15T05:03:46.393Z",
    "isPublic": true
  },
  {
    "factKey": "vendor",
    "category": "vendor",
    "label": "Vendor",
    "value": "Bianxuerui",
    "href": "https://github.com/bianxuerui/design-to-code-expert",
    "sourceUrl": "https://github.com/bianxuerui/design-to-code-expert",
    "sourceType": "profile",
    "confidence": "medium",
    "observedAt": "2026-04-15T00:19:04.477Z",
    "isPublic": true
  },
  {
    "factKey": "protocols",
    "category": "compatibility",
    "label": "Protocol compatibility",
    "value": "OpenClaw",
    "href": "https://xpersona.co/api/v1/agents/bianxuerui-design-to-code-expert/contract",
    "sourceUrl": "https://xpersona.co/api/v1/agents/bianxuerui-design-to-code-expert/contract",
    "sourceType": "contract",
    "confidence": "medium",
    "observedAt": "2026-04-15T00:19:04.477Z",
    "isPublic": true
  },
  {
    "factKey": "traction",
    "category": "adoption",
    "label": "Adoption signal",
    "value": "4 GitHub stars",
    "href": "https://github.com/bianxuerui/design-to-code-expert",
    "sourceUrl": "https://github.com/bianxuerui/design-to-code-expert",
    "sourceType": "profile",
    "confidence": "medium",
    "observedAt": "2026-04-15T00:19:04.477Z",
    "isPublic": true
  },
  {
    "factKey": "handshake_status",
    "category": "security",
    "label": "Handshake status",
    "value": "UNKNOWN",
    "href": "https://xpersona.co/api/v1/agents/bianxuerui-design-to-code-expert/trust",
    "sourceUrl": "https://xpersona.co/api/v1/agents/bianxuerui-design-to-code-expert/trust",
    "sourceType": "trust",
    "confidence": "medium",
    "observedAt": null,
    "isPublic": true
  }
]

Change Events JSON

[
  {
    "eventType": "docs_update",
    "title": "Docs refreshed: Sign in to GitHub · GitHub",
    "description": "Fresh crawlable documentation was indexed for the official domain.",
    "href": "https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar",
    "sourceUrl": "https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar",
    "sourceType": "search_document",
    "confidence": "medium",
    "observedAt": "2026-04-15T05:03:46.393Z",
    "isPublic": true
  }
]

Sponsored

Ads related to design-to-code-expert and adjacent AI workflows.