ElevenLabs 首席网页设计师 Roman Tesliuk 分享如何利用克拉尼图案、色彩和动效打造独特品牌标识，同时平衡初创公司的速度与设计卓越性。
Roman Tesliuk, lead web designer at ElevenLabs, shares how they developed a unique brand identity using cymatic patterns, colors, and motion, while balancing startup speed with design excellence.
要点 · TL;DR
设计可复用组件系统，实现品牌一致性与可扩展性。 Design a reusable component system for scalable brand consistency.
使用 Claude Code 等 AI 编码工具，从 Figma 快速原型开发。 Use AI coding tools like Claude Code to rapidly prototype from Figma.
在线分享作品并参与社区互动，以建立职业机会。 Share work online and engage community to build career opportunities.
核心观点 · Key points
设计可复用的组件系统，而非单个页面，以实现可扩展性和一致性。 Design a system of reusable components, not just individual pages, for scalability and consistency.
使用 AI 编码工具（如 Claude Code）快速原型开发，从 Figma 实现像素级完美的设计。 Use AI coding tools like Claude Code to rapidly prototype and build pixel-perfect designs from Figma.
在线分享项目并与社区互动，以建立个人影响力和职业机会。 Share projects online and engage with the community to build presence and career opportunities.
从核心交互或“惊叹因素”入手，让产品目的立即清晰。 Start with a core interaction or 'wow factor' to make the product's purpose immediately clear.
将 AI 编码工具视为队友：研究最佳实践、制定计划，并使用 Markdown 文件保存上下文。 Treat AI coding tools as a teammate: research best practices, create plans, and use markdown files for context.
反共识 · Contrarian takes
避免过度使用品牌图案（如克拉尼图形）；用简洁布局和微妙效果平衡。 Avoid overusing brand patterns like Chladni; balance them with clean layouts and subtle effects.
有意留在初创公司而非大公司，以从头学习构建过程。 Intentionally stay in startups rather than big companies to learn building from the ground up.
限制（如便宜的 Framer 套餐）能催生创意解决方案，例如用覆盖层代替新页面。 Constraints like a cheap Framer plan can breed creative solutions, like using overlays instead of new pages.
即使使用 AI 代码生成，复杂多屏流程也应先在 Figma 中设计。 Design in Figma first for complex multi-screen flows, even when using AI code generation.
获得工作的最佳方式是与公司内部人员联系，而非通过 HR 申请。 The best way to get hired is to connect with people inside the company, not apply through HR.
本期章节 · Chapters（共 18）
0. 罗曼·特斯柳克与11 Labs简介Introduction to Roman Tesliuk and 11 Labs
1. 品牌身份与设计探索Brand Identity and Design Exploration
2. 赞助商信息Sponsor Messages
3. 品牌应用于网站Applying Brand to Website
4. 设计演进与品牌系统Design Evolution and Branding System
5. 探索粘土图案与视觉效果Exploring clay patterns and visual effects
6. 设计音乐页面与视觉分组Designing the music page and visual grouping
7. 网格系统演进与视觉一致性Grid system evolution and visual consistency
8. 工作规模与Inflight产品推广Scale of work and Inflight product promotion
9. 重新设计文本转语音页面Redesigning the text-to-speech page
10. 展示最新网站设计Showcasing the latest website design
11. Appstax起源与工艺聚焦方法Origin of Appstax and the craft-focused approach
12. 构建Cali：新实验Building Cali: A New Experiment
13. 使用Claude Code的经验与建议Lessons and Advice for Using Claude Code
14. 设计流程：Figma优先Design Process: Figma First
15. 用AI设计：Figma与Claude CodeDesigning with AI: Figma and Claude Code
16. 分享作品与建立社区的建议Advice on sharing work and building community