LSF Website Design skill
A Chinese-language website skill: studies references, builds layout and motion, verifies in a browser, reviews.
- 64 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The skill starts a real browser and writes site files into the project.
- Third-party skills and a browser are connected for it to work.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/lsf-website-designDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skill starts a real browser and writes site files into the project.
- Third-party skills and a browser are connected for it to work.
This is third-party code. Review the repository files before installing.
What it does
LSF Website Design takes an agent through the full web design cycle: studying reference sites, building layout and motion, verifying in a real browser and an independent review. The agent picks one of seven basic modes (A, B, C, D, F, G, H) on its own: building from a reference, original exploration, finding references, reverse-engineering a prompt from a site and reviewing a finished page. In reference mode the agent first measures six kinds of behaviour of the original and locks them, then rebuilds the page: theme, images, copy and interactions are reworked for the new task. Rules, templates and scripts load per task rather than all at once. It needs three free components: the `lsf-ai-agent` skill for model dispatch, the `ego-browser` skill and the Ego Lite browser. The repository has sample works made with Claude Opus 5.5, GPT 6 Pro and DeepSeek V4.1 Flash.
Who it is for. Web designers and developers who read Chinese and need sites with deliberate motion verified in a real browser.
Good fit when
- You need a showcase site for a city or brand modelled on a reference you like.
- A finished page needs a visual and interaction review with no code changes.
- You want to derive a full prompt from someone else's site to build a similar one.
- A strong model builds the first version and a cheaper one handles refinements.
Not a fit when
- You need a ready template without reference analysis.
- Documentation and examples in Chinese are not accessible to you.
- You cannot install the Ego Lite browser and the companion skills.
Example request
Use $lsf-website-design: analyze this site and derive a full prompt for building a similar one, write no code.Limitations
Documentation and rules are written in Chinese, skill version 34. Without the three free components (`lsf-ai-agent`, `ego-browser`, the Ego Lite browser) the main cycle does not run, and installation needs separate confirmation. Model accounts, quotas and subscriptions are paid under their owners' terms. Reference mode reproduces another site's design: rights to styling, images and copy are for the user to verify. The author did not obtain identical prompts and parameters for the comparison with the no-skill version, so the examples are a showcase rather than proof.
How to disable. Delete the `~/.agents/skills/lsf-website-design` folder (on Windows `%USERPROFILE%\.agents\skills\lsf-website-design`). Companion skills and the Ego Lite browser are removed separately.
FAQ
How do I invoke the skill?
Name it in the request: `$lsf-website-design`. In hosts without that syntax, ask the agent to read the skill `SKILL.md`.
Which modes exist?
Seven: A, B, C, D, F, G and H. The agent chooses, for example building from a reference, original exploration, finding references, reverse prompt and review of finished work.
What else must be installed?
The `lsf-ai-agent` skill, the `ego-browser` skill and the Ego Lite browser. They are free, while models are paid per their owners' terms.
Which models does the author recommend?
For a first version, Claude Opus 5.5, GPT 6 Ultra or GPT 6 Pro. DeepSeek V4.1 Flash is named as a substitute and Kimi K3.1 is untested.
Can it only review a page?
Yes, ask for a review with no edits: "review visuals and interactions, do not change code". The agent picks the review mode.
Discussion
No questions or reviews yet.
Related
SkillsA skill for Claude Code and other agents that builds websites directed like films: art direction before code, local CLI asset generation and an anti-slop linter
The /taste skill turns a URL into design tokens and trade-off principles, with ready rules for Cursor and Claude Code
A web-design skill for Claude Code: a DESIGN.md spec first, then code that follows it
design-to-code: a website from a design image
design-to-code
A skill that turns a screenshot, mockup, Figma frame or live page into a responsive site and checks it against the design
A free Claude skill that writes a build spec, picks cinematic media, builds a landing page and checks it with screenshots
From editorial-style websites to model comparisons and Feishu wikis: six independent skills for different jobs.
README in short
A skill that runs website work end to end: references, build, real-browser verification and review. Examples were made with different models and docs are in Chinese.