Stop hoarding references. Start turning them into your own edge.
Takeaway Skill pulls sites, effects, and visual systems apart, then helps you rebuild them as reusable patterns instead of surface-level copies.
Public v1.0 now. The versions shown on my social media are closer to an internal v3 workflow.
English | 简体中文
- stop just collecting good references
- distill good sites, designs, and interactions into reusable local assets
- place the distilled results into the management page I built for viewing, demos, and iteration
- make it easier to manage, review, present, and keep improving
- combine it with other skills to move toward automated distillation, automated design, and automatic asset use
Watch the full demo on YouTube
takeaway-skill is not about copying someone else's facade and selling it.
It is about:
- learning faster
- studying references with better judgment
- separating mechanism from surface style
- adapting ideas into stronger original work
This repository is shared to increase visibility, exchange methods, and make the core idea easier to reuse.
- a lightweight page shell for hosting distilled entries
- the public version of
takeaway-skill - safe reference templates
- an editable framework without real case content
- the current public
v1.0release
- real case studies
- private research archives (selected non-sensitive parts may appear later in
v3) - source material packages (selected public-safe parts may appear later in
v3) - private links
- local absolute paths
- third-party example libraries
- private identity details that belong only to the internal workflow
- any feature for archiving third-party screenshots or recordings inside the public package
- the
v3.0upgrade package
This repository focuses on takeaway-skill itself.
In my personal workflow, the strongest results usually come from several skills working together, for example:
takeaway-skill- decide what is worth taking and what must not be copied directly
codingskill- inspect site code, rebuild structures, and produce working reconstructions
static-design-skill- compress page logic into clearer layout and visual decisions
- optional supporting skills
- such as SVG, visual extraction, and other production-side helpers
I have also already distilled a larger body of references and accumulated more material packs and intermediate assets in the internal workflow.
So the social media version looks stronger not only because of multi-skill coordination, but also because it is built on top of more prepared material.
If you want results closer to my social media demos, a multi-skill workflow is usually necessary. takeaway-skill defines the strategy, but it does not replace implementation.
If this is your first time using Codex or Claude Code, start here.
git clone https://github.com/julilaoshi/takeaway-skill.git
cd takeaway-skillThen open this folder in Codex, Claude Code, or your cloud coding workspace.
Read skill/SKILL.md first.
Then use takeaway-skill to distill this reference into something reusable.
Do not copy surface style directly.
Place the result into site/index.html so I can review it in the management page.
I want to distill and study this webpage.
I will paste the link, screenshots, or a screen recording into the chat.
Read skill/SKILL.md first.
Do not copy the surface style directly.
Help me extract the structure, mechanisms, and reusable parts.
Then place the result into site/index.html so I can review it in HTML.
I want a control panel on the right side for adjustable visual effects.
Please add a live effect control area to the current page.
The parameters can include intensity, speed, size, and opacity.
Write the result directly into site/index.html so I can tweak it in HTML.
Do not give me a text-only answer.
Place the result directly into site/index.html.
After editing, tell me what I should check in the HTML page.
site/index.html- main entry pagesite/assets/- public-facing visual assetssite/ui/- local UI stylesskill/SKILL.md- the public skill filereferences/- safe templates and public release guidanceagents/openai.yaml- UI metadata for the skill
- GITHUB_ABOUT_SUGGESTION.md - suggested GitHub description and topics
- PUBLIC_RELEASE_CHECKLIST.md - final pre-publish review list
This repository is not meant to stop at a text-only skill output.
The default flow is:
- use
skill/SKILL.mdto distill a reference - use
references/as the safe output scaffold - place the distilled result into the entry structure in
site/index.html - review the result through the webpage
If someone only reads the skill file and never updates site/index.html, they are only using half of this repository.
- Branding copy can stay in Chinese.
- Structural UI can stay in English.
- Documentation uses English-first with a Chinese companion file.
The code, documentation, and reusable framework are released under the MIT License.
However, brand-facing assets and identity elements are not automatically transferred with that license. See BRAND_NOTICE.md for the reserved brand assets and identity elements.
In short:
- reuse the framework
- study the method
- build your own version
- do not present derivative work as if it were the original author's personal brand
- replace reserved brand-facing elements with your own before redistribution if needed
The internal version of takeaway-skill may keep local research material for private study, including third-party screenshots, recordings, and object-specific notes.
This public repository does not ship that capability.
Public means:
- method
- templates
- placeholders
- reusable framework
Public does not mean:
- third-party screenshot archive
- third-party recording archive
- private identity sync
- private workflow traces copied from the internal version
| Platform | Identity |
|---|---|
| X / Twitter | @julilaoshi |
| @julilaoshi | |
| YouTube | @julilaoshi |
| Red Book | 居里老师 |
MIT for the code and reusable framework.
See LICENSE and BRAND_NOTICE.md.
