An agent skill that turns a brief into one self-contained HTML file — a deck, a document, or a diagram set. No build step, no bundler, nothing to install afterwards. The design system lives in the repository, so two decks made months apart still look related.브리프를 하나의 독립 실행 HTML 파일로 바꿔 주는 에이전트 스킬입니다. 발표 자료, 문서, 다이어그램 중 무엇이든 빌드 과정도, 번들러도, 추가 설치도 없습니다. 디자인 시스템이 저장소 안에 있으므로 몇 달 간격으로 만든 자료도 서로 닮아 있습니다.
/tedandlisa a 12-slide deck on our Q3 roadmap
Every deck goes through the same sequence, which is why the results are consistent. The intake only asks what the brief could not tell it, and every question has a default.모든 자료가 같은 순서를 거치기 때문에 결과가 일정합니다. 인테이크는 브리프에서 알 수 없는 것만 묻고, 모든 질문에 기본값이 있습니다.
/tedandlisa
panel
registry
patterns.md
step 10
.html
/tedandlisaBuild a deck, document, or diagram set자료·문서·다이어그램 제작One file, no build step파일 하나, 빌드 없음
/tedandlisa-new-templateTurn an HTML file you like into a template마음에 드는 HTML을 템플릿으로The source never ships원본은 커밋하지 않음
/tedandlisa-designStyle presets, animated HTML, editable .pptx스타일 프리셋, 애니메이션 HTML, .pptxFor shapes the house style has not got하우스 스타일 밖의 형태용
tedandlisa_thumbs.pyRe-capture the gallery thumbnails갤러리 썸네일 재촬영Chrome, used read-onlyChrome, 읽기 전용
Clone into your agent's skills directory and it is available in every project.에이전트의 스킬 디렉터리에 클론하면 모든 프로젝트에서 쓸 수 있습니다.
git clone --recurse-submodules https://github.com/monomind-ai-lab/hi-ted-meet-lisa.git ~/.claude/skills/tedandlisa
They differ in shape, navigation, and how they handle language — so the choice is about what the reader will do with it, not which one looks nicer.형태와 내비게이션, 언어 처리 방식이 각각 다릅니다. 그래서 선택 기준은 “어느 쪽이 예쁜가”가 아니라 “독자가 이것으로 무엇을 하는가”입니다.
Horizontal scroll-snap slides, dark ink and accent halos. Google Translate loads only when a reader picks another language.가로 스크롤 스냅 슬라이드. 어두운 배경과 강조 후광. 다른 언어를 고를 때만 Google 번역을 불러옵니다.
Reads like a website page: top nav, hash-routed sections, diagrams with a pan-and-zoom viewer.웹페이지처럼 읽힙니다. 상단 내비게이션, 해시 라우팅, 확대·이동이 가능한 다이어그램 뷰어.
Diagram-first slides on light paper, one drawing per slide. Every slide is written twice, so labels inside a diagram translate too.밝은 배경의 다이어그램 중심 슬라이드. 한 장에 그림 하나. 모든 슬라이드를 두 언어로 작성해 도형 안 레이블까지 번역됩니다.
One system diagram on slate, where colour carries meaning rather than decoration.슬레이트 배경의 시스템 다이어그램 한 장. 색이 장식이 아니라 의미를 담습니다.
Argues an information architecture, with the navigation wired up so reviewers can click through it at two breakpoints.정보 구조를 설득하는 문서. 내비게이션이 실제로 동작해 두 가지 화면 폭에서 눌러 볼 수 있습니다.
A project's public face: sticky nav, hash-routed pages, one shared footer. This page is it, filled in.프로젝트의 공개 페이지. 고정 내비게이션, 해시 라우팅, 공용 푸터. 지금 보고 있는 이 페이지가 그 템플릿입니다.
slide-design, is a handoff rather than a template — it drives a vendored pipeline for style presets and editable .pptx, which the house templates deliberately do not do.일곱 번째 항목 slide-design은 템플릿이 아니라 인계 경로입니다. 하우스 템플릿이 일부러 다루지 않는 스타일 프리셋과 편집 가능한 .pptx를 별도 파이프라인으로 처리합니다.
Consistency here is structural, not a matter of asking nicely in a prompt.여기서의 일관성은 프롬프트로 부탁해서 얻는 것이 아니라 구조에서 나옵니다.
Design tokens, the typographic scale, the component library and the navigation all ship in the repository. The agent copies a template and fills it; it never starts from a blank file, so there is nothing to reinvent.디자인 토큰, 타이포그래피 스케일, 컴포넌트 라이브러리, 내비게이션이 모두 저장소에 들어 있습니다. 에이전트는 템플릿을 복사해 채울 뿐, 빈 파일에서 시작하지 않습니다.
Nine to sixteen questions depending on the template, filtered by the shape you picked, every one carrying a default. A panel that asks irrelevant questions trains people to skim the relevant ones.템플릿에 따라 9~16문항이며, 선택한 형태에 맞게 걸러집니다. 모든 문항에 기본값이 있습니다. 관계없는 질문을 하는 패널은 정작 중요한 질문까지 대충 넘기게 만듭니다.
No build step, no bundler, no package manager, nothing to install to read it. Open it, present it, print it, or email it. The export button is the browser's own, never a bundled library.빌드 과정도, 번들러도, 패키지 매니저도 없고, 읽기 위해 설치할 것도 없습니다. 열고, 발표하고, 인쇄하고, 메일로 보내면 됩니다. 내보내기는 브라우저 기본 기능만 씁니다.
Step 10 of the skill. It prefers your own review tooling, falls back to the copy vendored here, and has a measured, tooling-free checklist as the floor — contrast ratios and 375px overflow are numbers, not opinions.스킬의 10단계입니다. 사용자의 검토 도구를 우선 쓰고, 없으면 저장소에 포함된 사본을, 그것도 없으면 측정 기반 체크리스트를 씁니다. 명암비와 375px 넘침은 의견이 아니라 수치입니다.
Everything is plain HTML, CSS, and Python's standard library. Run git clone and you can read the whole thing in an afternoon.전부 순수 HTML, CSS, 그리고 파이썬 표준 라이브러리입니다. git clone 한 번이면 반나절 만에 전체를 읽을 수 있습니다.
Drives the ten steps, from intake to hand-off, and holds the answer table.인테이크부터 전달까지 열 단계를 이끌고, 응답 대응표를 담고 있습니다.
Serves the visual intake on loopback and captures its answers as JSON. Standard library only.로컬 루프백으로 인테이크 화면을 띄우고 응답을 JSON으로 저장합니다. 표준 라이브러리만 사용합니다.
One entry per template, pointing at its file, its pattern reference, and its thumbnail.템플릿마다 한 항목씩, 파일·패턴 문서·썸네일 경로를 가리킵니다.
Verbatim, known-good markup for every component, plus the rules that are easy to get wrong.모든 컴포넌트의 검증된 마크업 원문과, 틀리기 쉬운 규칙을 함께 담았습니다.
For Claude Code the skills directory is ~/.claude/skills/. Other agents use their own, but the layout is the same: one directory per skill, each with a SKILL.md at its top.Claude Code의 스킬 디렉터리는 ~/.claude/skills/입니다. 다른 에이전트는 경로만 다를 뿐 구조는 같습니다. 스킬마다 디렉터리 하나, 그 안에 SKILL.md 하나입니다.
The --recurse-submodules flag matters: without it the vendored pipeline directory is empty and the design handoff cannot run.--recurse-submodules 옵션이 중요합니다. 빠뜨리면 벤더 파이프라인 디렉터리가 비어 있어 디자인 인계가 동작하지 않습니다.
git clone --recurse-submodules https://github.com/monomind-ai-lab/hi-ted-meet-lisa.git ~/.claude/skills/tedandlisa
They live inside the clone. Symlinking them one level up is what makes /tedandlisa-design and /tedandlisa-new-template appear as commands of their own.두 스킬은 클론 안에 있습니다. 한 단계 위로 심볼릭 링크를 걸어야 /tedandlisa-design과 /tedandlisa-new-template이 독립 명령으로 나타납니다.
ln -s ~/.claude/skills/tedandlisa/skills/tedandlisa-design ~/.claude/skills/tedandlisa-design
One line is enough. The intake panel opens, asks what the brief could not tell it, and every question already has a default — you can accept the lot and still get a finished file.한 줄이면 충분합니다. 인테이크 패널이 열리고 브리프에서 알 수 없는 것만 묻습니다. 모든 문항에 기본값이 있어 전부 그대로 두어도 완성된 파일이 나옵니다.
/tedandlisa a 12-slide deck on our Q3 roadmap, for the exec team
You get one HTML file. Double-click it. There is no server to start and no dependency to install — if it opens, it is finished.HTML 파일 하나가 나옵니다. 더블클릭하면 끝입니다. 띄울 서버도, 설치할 의존성도 없습니다. 열린다면 완성된 것입니다.
.claude/skills/ instead of your home directory. Everything else is identical.홈 디렉터리 대신 해당 프로젝트의 .claude/skills/에 클론하세요. 나머지는 동일합니다.
There is no build system to learn. Two Python scripts, a registry, and a folder of HTML.배워야 할 빌드 시스템이 없습니다. 파이썬 스크립트 두 개, 레지스트리 하나, 그리고 HTML 폴더 하나가 전부입니다.
Every template is a single HTML file carrying its own design tokens, chrome, scripts, and language mechanism. They are not variations of one look — a change to one has no bearing on another, which is deliberate: one template per shape, not one template with switches.각 템플릿은 자체 디자인 토큰과 크롬, 스크립트, 언어 처리 방식을 담은 HTML 파일 하나입니다. 한 디자인의 변형이 아니므로 하나를 고쳐도 다른 것에 영향이 없습니다. 이는 의도된 설계로, 형태마다 템플릿 하나이지 스위치가 달린 템플릿 하나가 아닙니다.
Language is handled two ways. The presentation deck loads Google Translate on demand, which is why anything that must not be translated — a filename, a command, a product name — is marked in its markup. The document templates instead carry both languages inline and toggle them with a class, so nothing is machine-translated and nothing needs protecting.언어는 두 가지 방식으로 처리합니다. 발표용 덱은 필요할 때 Google 번역을 불러오므로, 파일명·명령·제품명처럼 번역되면 안 되는 것은 마크업에 표시합니다. 문서 템플릿은 대신 두 언어를 파일 안에 함께 넣고 클래스로 전환하므로, 기계 번역이 개입하지 않고 따로 보호할 것도 없습니다.
python3 scripts/tedandlisa_intake.py --prompt "the deck brief" --out intake.json
python3 scripts/tedandlisa_thumbs.py --only project-website
Against a presentation app, and against simply asking an agent for a deck with no skill installed.프레젠테이션 앱, 그리고 스킬 없이 에이전트에게 그냥 자료를 부탁하는 경우와 비교합니다.
| Capability항목 | Hi Ted, Meet Lisa | Presentation app프레젠테이션 앱 | Agent, no skill스킬 없는 에이전트 | Notes비고 |
|---|---|---|---|---|
| One self-contained file독립 실행 파일 하나 | yes | export | varies | Opens anywhere, no runtime.어디서나 열리고 런타임이 필요 없습니다. |
| Same look months apart몇 달 뒤에도 같은 디자인 | yes | yes | no | A template file beats a remembered instruction.기억된 지시보다 템플릿 파일이 확실합니다. |
| Two languages in one file한 파일에 두 언어 | yes | no | no | Written inline; works with no network.파일 안에 함께 작성되어 네트워크 없이 동작합니다. |
| Edit without an agent에이전트 없이 편집 | HTML | yes | HTML | Plain HTML and CSS, but you do need to be comfortable in them.순수 HTML·CSS이지만, 다룰 줄 알아야 합니다. |
| Editable in PowerPointPowerPoint에서 편집 | handoff | yes | no | Only through /tedandlisa-design, which needs bun./tedandlisa-design을 거쳐야 하며 bun이 필요합니다. |
| Real-time co-editing실시간 공동 편집 | no | yes | no | A file on disk has no collaboration model. This is the real trade.디스크 위의 파일에는 협업 모델이 없습니다. 이것이 실제 대가입니다. |
Not a release history — the repository has no versions. These are the decisions recorded as they were taken, each one narrowing what a future contributor may freely change.릴리스 이력이 아닙니다. 이 저장소에는 버전이 없습니다. 아래는 결정이 내려진 시점에 기록된 것들로, 각각이 이후 기여자가 자유롭게 바꿀 수 있는 범위를 좁힙니다.
The project-website template keeps the source design's dark palette, contrast failure included.project-website 템플릿은 원본 디자인의 어두운 팔레트를 명암비 미달까지 그대로 유지합니다.
The sitemap-ia skeleton ships on CDNs, and standalone is an answer rather than the default.sitemap-ia 스켈레톤은 CDN을 사용하며, 완전 독립 실행은 기본값이 아니라 선택 항목입니다.
Intake questions can be scoped to a single template, not only to a kind.인테이크 문항을 종류 단위가 아니라 개별 템플릿 단위로 한정할 수 있습니다.
The README opens with how to start, not with why it matters.README는 의의가 아니라 시작하는 방법으로 시작합니다.
Source documents never enter this repository.원본 문서는 이 저장소에 들어오지 않습니다.
One template per shape, not one template with switches.형태마다 템플릿 하나이지, 스위치가 달린 템플릿 하나가 아닙니다.
If you have an HTML deck or page whose look you want to keep, /tedandlisa-new-template turns it into one — extracting the stylesheet and machinery, replacing the subject matter with placeholders, and registering the result.디자인을 계속 쓰고 싶은 HTML 자료나 페이지가 있다면 /tedandlisa-new-template이 템플릿으로 바꿔 줍니다. 스타일시트와 동작부를 추출하고, 내용은 플레이스홀더로 바꾼 뒤 등록합니다.
python3 scripts/tedandlisa_new_template.py analyze SOURCE.html
python3 -m http.server 8777 --bind 127.0.0.1