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.