Turn your design request into an editable page—with Affinity or HTML.
Load Skill · Try the HTML editor · Example
Public v3.0.0 focuses on Affinity and HTML, with Pencil compatibility. It provides general editing workflows and delivery checks; the maintainer's personal aesthetics, design philosophy and private methods are not included.
English | 简体中文
Open web/index.html, edit the sample, save JSON, and export HTML. This neutral example is included in the repository. Video demo for the Affinity/HTML release: publishing soon.
- Build or revise a visual page using your own content and preferences.
- Work in Affinity through your agent's available computer-use tools or a verified application interface.
- Edit simple layers in the browser, save an editable JSON project, and export a standalone HTML viewing copy.
- Continue an existing Pencil project when that is the format you use.
- Check text, protected objects, saved files and exported results before delivery.
Copy this into your coding agent:
Load julilaoshi-design from https://github.com/julilaoshi/julilaoshi-design.
Read README.md and skill/SKILL.md. Keep skill/references and skill/agents
with SKILL.md if installing the skill directory. Retain the full repository
if I will use the bundled web/ editor.
This repo needs no npm or pip install. Loading does not authorize app
installation, permissions changes or design edits. Confirm the skill is
readable, then stop and wait for my design task. Reply in my language.
Then give a task, for example:
Use julilaoshi-design. Make a simple event poster in HTML using my supplied
copy. Keep the text editable, show a preview, and save an editable project
plus the final HTML. Use my visual preferences; ask only for missing facts.
Manual download alternative:
git clone https://github.com/julilaoshi/julilaoshi-design.git
cd julilaoshi-designThe skill/ directory is self-contained for instructions. The browser editor is a separate web/ directory in this repository. No private skill or reference library is needed.
| Route | Best fit | Requirements |
|---|---|---|
| Affinity | Native editable documents and desktop refinement | An installed, licensed application and agent access to its UI or a verified interface |
| HTML | Browser editing and portable visual pages | A browser; no desktop design app or build step |
| Pencil compatibility | Existing .pen files or an explicit Pencil request |
Official Pencil and accessible MCP tools |
The agent follows your format and existing file. It does not ask you to choose again when your request already makes the route clear.
The workflow covers both generations, with limited recorded tests on Designer 1.10.8 and Affinity 3.3.0 on macOS. Previous checks covered single-object colour changes, native saving and reopening; exact readback was available only on the configured newer route. This is not a claim that all versions, operations or file conversions work identically. The newer interface is optional, separately configured and not bundled. See validation scope.
Computer-use access depends on your agent and operating system. Illustrator and other editors are future extensions, not tested support. Affinity and Pencil are third-party products; this is an independent workflow project.
Open web/index.html directly or serve the repository locally. Move, resize and rotate simple layers, edit text and common styles, lock objects, undo/redo, and save a JSON project. Open project restores JSON or an exported HTML; Export HTML downloads a viewing copy. Preview hides the editor and has a return control. Edits are not automatically saved. If your browser blocks downloads, copy the generated file contents from the visible fallback box. The editor does not upload your design to a server.
The included example has no external images or fonts. It is a lightweight page editor, not a full vector illustration or publishing application.
Included: general tool workflows, basic layout guidance, file checks, neutral examples and reusable code. Excluded: personal aesthetics, philosophy, private methods, prompt chains, evaluation criteria, case libraries and private materials. Your designs use your own brief and preferences.
See MAINTENANCE.md, CONTRIBUTING.md, CHANGELOG.md and release checks. Bug reports should include a minimal non-sensitive example and the actual app/browser version.
Reusable code and documentation are MIT licensed. Third-party apps and assets retain their own terms. See LICENSE and BRAND_NOTICE.md.
| Platform | Identity |
|---|---|
| X / Twitter | @julilaoshi |
| @julilaoshi | |
| YouTube | @julilaoshi |
| Red Book | 居里老师 |
