Lanhu To Code

Lanhu To Code

Overview

Use this skill to turn Lanhu design material into production-ready frontend code while preserving the current project's conventions. Treat the design as the source of truth, but make explicit assumptions when Lanhu data is incomplete or inaccessible.

Workflow

1. Collect design inputs.

   • Ask for the Lanhu link, screenshots, exported images, annotations, CSS snippets, dimensions, and asset package if they are not already provided.
   • If the Lanhu link requires login or is inaccessible, work from screenshots and any exported specs the user can provide.
   • For visual tasks, use browser or image inspection tools when available rather than relying only on text descriptions.

2. Inspect the target codebase.

   • Identify framework, styling system, component library, asset conventions, routing, and existing UI patterns.
   • Reuse existing components and tokens before introducing new primitives.
   • Do not create a landing page or explanatory wrapper unless the design explicitly calls for it.

3. Extract the design system facts.

   • Capture canvas size, layout grid, spacing, typography, colors, radii, borders, shadows, imagery, icons, states, and responsive behavior.
   • Prefer exact values from Lanhu specs. When only screenshots exist, estimate carefully and record assumptions.
   • Read references/visual-checklist.md when implementing a full page, dense component, or anything requiring close visual fidelity.

4. Implement the UI.

   • Build the actual requested screen or component, not a placeholder.
   • Map repeated elements into reusable components only when repetition or local project patterns justify it.
   • Use semantic HTML and accessible controls. Preserve keyboard and focus behavior for interactive elements.
   • Import or copy provided assets into the project's established asset location. Do not hotlink private Lanhu assets.

5. Match visual fidelity.

   • Start a local dev server when the project requires one.
   • Capture screenshots at the design's native viewport and at relevant responsive breakpoints.
   • Compare layout, spacing, typography, colors, image cropping, and interaction states against the Lanhu material.
   • Iterate until obvious mismatches are fixed or explicitly called out as blocked by missing design data.

6. Deliver with evidence.

   • List changed files, verification commands, and screenshot/browser checks performed.
   • Mention any assumptions, missing assets, inaccessible Lanhu data, or intentional deviations from the design.

Implementation Guidance

• Favor CSS variables, design tokens, theme utilities, and existing component props over one-off values when the project already has them.
• Use absolute pixel values where the design is fixed-format, and responsive constraints where the UI must adapt.
• Keep text from overflowing controls or overlapping neighboring content.
• Use icon libraries already present in the project. If no icon library exists, use provided exported icons or simple inline SVG only for small, necessary symbols.
• Preserve image aspect ratios and object positioning from the design. Use real provided images when available.
• Avoid decorative embellishments not present in the Lanhu design.

Missing Or Ambiguous Data

If design data is incomplete, proceed with best judgment after checking available artifacts. Call out assumptions at the end instead of blocking unless a core requirement cannot be inferred, such as the target framework, the only available screen, or access to required assets.

User Request Examples

• "用蓝湖设计稿还原这个页面"
• "把这个 Lanhu 链接做成 React 组件"
• "根据蓝湖标注实现移动端页面"
• "按这个蓝湖截图写 Tailwind 页面，并帮我对齐视觉"
• "把蓝湖导出的素材接到现有 Vue 项目里"