Skip to content

Repository files navigation

julilaoshi-design / 居里老师设计

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 | 简体中文

Demo

Original starter before and after a Chinese text edit

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.

What you can do

  • 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.

Load Skill

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-design

The 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.

Choose a route

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.

Affinity: old and new versions

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.

HTML editor

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.

Public scope

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.

Maintenance and contribution

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.

License and brand

Reusable code and documentation are MIT licensed. Third-party apps and assets retain their own terms. See LICENSE and BRAND_NOTICE.md.

Find Julilaoshi

Follow Juli on GitHub Star julilaoshi-design

Platform Identity
X / Twitter @julilaoshi
Instagram @julilaoshi
YouTube @julilaoshi
Red Book 居里老师

About

julilaoshi-design / 居里老师设计: editable Affinity and HTML workflows, computer-use guidance, browser editor; Pencil compatible.

Topics

Resources

Contributing

Stars

119 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages