Design Code

RSS: https://www.youtube.com/feeds/videos.xml?channel_id=UCTIhfOopxukTIRkbXJ3kN-g

教设计师写代码、教开发者做设计，使用 React、Flutter 等最佳设计工具。

用 Claude Opus 5 构建的 Three.js 落地页

用 Claude Opus 5 生成的 Three.js 3D 落地页展示视频。视频呈现了多个基于 Three.js 的交互式网页设计案例，展示 AI 辅助生成 3D 网页的效果。

收藏1 天前

我用 Claude Code 和 Opus 5 构建 Three.js 网站的工作流

Design Code 分享用 Claude Code + Opus 5 构建 Three.js 网站的完整工作流：给 Claude 一个参考 URL 和一句提示词「用单个 HTML 文件复刻，自检到完美」，让 AI 研究真实网站动效后本地迭代。项目 Kage 是一个京都寺庙夜行的 cinematic 体验，开源在 GitHub。关键技巧包括用 Mobbin MCP 找设计参考、透明 PNG 做视差深度、把有效效果存为可复用 agent skills。

收藏2 天前

GPT-5.6 Sol Turns Codex Into an AI Art Director

收藏15 天前

Figma Motion 功能实测：让动效与着色器回归设计画布

Figma 推出 Motion 功能，将动画、着色器和自动关键帧集成在设计画布内，实现设计与动效的同地编辑。作者实测了基础动画、Agent 生成动效及自定义 Shader 效果，指出 Agent 仍存在局限。该功能降低了动效制作门槛，让设计迭代更贴近代码逻辑，对 UI/UX 设计师和前端开发者有直接参考价值。

收藏51 天前

Framer 3.0 AI Agent实测：在画布内生成可编辑落地页

作者实测Framer 3.0的新AI Agent功能，核心亮点在于AI生成的页面直接输出为可编辑的图层、组件和响应式变体，而非传统聊天生成器的静态代码。文章对比了基础提示词与详细设计系统提示词的效果，指出详细提示能生成更可控的结构。但也指出了关键痛点：两次生成消耗了1356个积分，超过了月度限额，这在实际迭代中是个成本问题。结论是Canvas内的AI生成比Chat-first构建器更易维护，但积分定价策略限制了高频试错。

收藏59 天前

我靠“氛围编码”折腾了几个月，但销量为零

DesignCode 频道直播分享作者使用 AI 进行“氛围编码”数月后，尽管产品功能完善且经过反复测试，但最终未能获得任何销售收入的真实经历。内容涉及 AI 辅助开发的实际效果与商业变现之间的差距，对关注 AI 编程工具落地和独立开发者困境的科技读者具有讨论价值。

收藏64 天前

在Codex中看到iOS模拟器真是荒谬。

收藏69 天前

别再制作AI垃圾落地页

AI生成的落地页常有一眼就能辨认的"AI味"：selected状态偷懒、装饰性眉毛过大、随机状态标签、发光特效、紫色渐变、空泛插画、默认字体、弱定价区……DesignCode 这支20分钟视频逐一列出这些设计破绽，并分享了一套从零开始的完整提示词工作流来规避它们。核心思路是不从空白提示出发，而是用截图、参考URL、文件、精准的设计术语告诉模型具体改什么。视频还对比了 Opus、GPT、Gemini 对同一提示的输出差异，并介绍了 Taste Skill、Impeccable 等社区工具链。适合所有用AI辅助前端/UI设计的开发者，信息密度高、方法可复用，不是空洞的趋势解读。

收藏72 天前

如何用图片和视频构建AI着陆页

这是一个AI建站教程视频，作者演示了如何使用工具构建带有上下文相关图片和生成视频的着陆页。视频指出当前AI生成网站的最大问题是图片过于模板化，缺乏产品契合度。作者展示了一套完整的工作流程：从设计系统出发，选择着陆页模块，生成多个方向，添加截图参考，批量生成上下文图片，再将选中的图片转为可循环/悬停播放的短视频。核心思路是从"提示词→着陆页"升级为"提示词→设计系统→着陆页→上下文图片→生成视频→交互打磨"的完整链路。视频包含详细的操作步骤和时间戳导航。

收藏82 天前