可以啊DeepSeek，零代码做了个网页小应用：心事便利贴

先展示，心事便利贴长这样——它可以是读书笔记>（左右滑动查看更多）也可以是学习便笺，>（左右滑动查看更多）可以有很多可能，>想用的话欢迎私信留言，我发你html文件，双击或拖到浏览器打开就能用：🌈卡片8种颜色任意切换，🌈标题/内容/标签/水印自行编辑，🌈喜欢还可以下载，3倍高清图片，透明背景，搭任何背景图都好看。从HTML应用做起过去用artifacts做过不少小应用，有年终总结、有文字视频、还有读书笔记，这种用自然语言实现漂亮小应用的感觉很好，>有种产品人员突然自己长出了手脚的感觉。这种兴奋感着实维持了挺长时间，后来做着做着不免会有差口气的感觉，小应用只能局限在artifacts的框框里，走不出来、用不出去，打个比方就像拿着PPT去路演的皮包公司。所以，接下来会更想从面向artifacts的创作转向面向ai coding工具的创作，把自己的想法变成小产品，哪怕一个也好，>走成一次闭环，比什么都重要。所有的终端应用里，网页前端（HTML）应用是最容易的，不涉及多个文件，直接跟大模型交互就能糊个简单产品。对编程小白，这回是真小白，难点在于看不懂代码，过去做产品知道有前端后端和数据库，但一次实操都没有，最近挤时间浅浅的学了一点前端，就用HTML编程试了个手，就是今天这个“心事便利贴”的来源。Step1：跟DeepSeek描述需求

请用html格式生成一个极简风格的知识卡片，卡片融合了莫兰迪色系的柔和美学和现代交互设计。设计要素如下：

 

**整体布局**

- 左右分栏设计：编辑区 + 预览区，编辑界面需创建配套的表单组件，实现实时预览效果。

- 响应式布局，移动端可自适应为垂直排列。

- 卡片采用1:1比例，视觉平衡，整体呈圆角设计。

- 内容结构清晰：从上到下依次为：标题 → 日期 → 正文 → 标签，右下角有个水印

 

**配色方案**

- 卡片背景选用莫兰迪色系，一共有8种背景颜色可选择：

{#dad0cf,#b5a5a6,#cfb7bd,#afc5d2,#c3b8be,#a893a3,#485679,#a47864}

- 每种配色包含三个层次：

  - 背景色

  - 文字色：与背景色同色系，但稍有加深的颜色

  - 线条色：与背景色同色系，但稍有加深的颜色

 

**细节设计**

- 标题下方添加细腻的分隔线

- 左侧和底部增加4px细线边框

- 标签使用白色透明胶囊设计，

- 水印采用半透明设计

- 鼠标悬停可切换配色方案

 

**交互体验**

- 点击卡片可循环切换配色，一共可以切换8种颜色

- 实时预览编辑内容

- 编辑区域可以流畅的输入文字

- 响应式设计，多端适配

结果你猜怎么着，第一次跑出来的效果居然比我想象的好，粗糙点但可用了。>插个点，>大家知道deepseek上能直接运行html么，知道的扣个1....点击黑框框的右下角，HTML就神奇般的跑起来了↓目前我还只在官网上看到html能直接运行，在几个周边平台上是没看到，这点其实很重要，想当年claude出artifacts的时候，deepseek是国内第一个跟的，后来不知道为啥下了，到现在也没上。Step2：反复的细节修改第一遍跑完不错且可用，这已经超出预期了，但还有很多细节可以优化，接下来就是漫长的：细节优化需求->提交deepseek改代码->改好了/改崩了，循环反复。类似这样的：

挺好的，请再优化几个地方：

1.卡片整体换成圆角的，

2.标签放到卡片底部，采用白色透明胶囊设计，增加视觉效果，

3.编辑区域缺少输入水印的表单，请添加，

4.背景色不太好看，我们换成这几个颜色：{

#cfb7bd,#afc5d2,#d3a5aa,#c3b8be,#c19e98,#a893a3,#ebd9af,#6b536a}

5.我想在编辑区域再添加一个下载卡片的按钮，点击下载卡片后，将卡片转换为图片，图片有3倍清晰度

过程中也摸索出AI coding一点简单的经验：>1.>少量多次，步步为营。>别把大模型真当你们单位的开发用，开发不喜欢业务总过来提需求，希望一次把需求说利索，但大模型不是，一次性需求提多了只会让它崩的更快，你还不知道它崩在哪个点>…>少量多次，跑通了及时保存版本，一步步进化。>2.>新对话，走起来。>有些时候，甚至很多时候，你发现一个需求点，它无论如何也改不好了，还振振有词“这些更改应该能确保正常运行”，实际上跑一遍啥也没变>…>换个平台，或重新开个对话，问题可能就解决了。除了>deepseek>官网，千问>Qwen/Claude/ds的>各平替平台都是不错的选择。这时我们不用从提示词开始，因为重新开始了代码就全变了，直接在新窗口提出疑问、代码复制粘贴，类似这样：

 

初次尝试，经验匮乏，希望以后能利用ai coding做出一款真·产品，不是贪吃蛇也不是计算器，是有用户、有场景、有PMF的真产品，先许个愿...

 

 

往期精彩
>年底了，惊艳一次，用Claude Artifacts生成年终总结，简洁明快还能无限复用>AI有温度| 内容的适老化改造，我们用Artifacts做了个文字播放视频>《真需求》AI读书手账3| 从贝克哈德改变公式破解保险销售的奥义