#howto
На виході: інфографіка, зверстана в HTML і CSS та відрендерена в PNG або SVG. Правиш не картинку, а код, тому ітерація коштує одну фразу.
1. Увімкни режим Cowork і модель Sonnet 4.6: Opus з'їсть більше токенів, а результат той самий.
2. Увімкни адаптивне мислення (Adaptive thinking) - воно краще тримає нюанси верстки.
3. Дай ключовий промпт:
Task: Create an infographic
Topic: <тема>
Audience: <для кого>
Goal: <що людина має зрозуміти або зробити>
Output:
1. Title
2. Sections (max 5)
3. For each section: headline, key stat or idea, visual suggestion
4. Suggested layout structure
5. Design style (colors, typography, spacing)
Constraints:
- Keep it scannable (mobile-first)
- Avoid generic visuals
- Prefer data-driven points
4. Отримуєш структуру: заголовок, до п'яти секцій, у кожній хедлайн, ключова цифра та ідея візуалу, плюс розкладка й стиль.
5. Просиш зверстати це в HTML+CSS і віддати PNG або SVG.
6. Далі правиш словами: «третя секція завелика», «стисни під мобільний».
Найцінніше тут - блок Constraints. Він відрізає стокові картинки й порожні тези; без нього вийде рівно та сама AI-інфографіка, яку ти бачив уже сто разів.
https://uxplanet.org/designing-infographics-with-claude-code-3c7a2bd675d2
📎 Читайте також:
→ Навчити Claude скіла записом екрана
→ Claude Cowork вчиться з-за плеча
→ Superset 2.0 - лад між Claude'ами
#claudecode #дизайн #ai
