소개
이전에 Flowith로 만들었던 AI News Site가 일단 반응형 웹이 아닙니다.
그리고 스케줄링이 잘 되지 않아서 3일 후 다시 만들지 않게 되어 있었습니다.
디자인도 별로 마음에 안 들었어요.
조금씩 개선해봤습니다.
진행 방법
디자인 가이드를 스크린샷으로 하지 않고, Figma Make로 만든 웹 사이트의 소스를 분석해서
design.md 파일을 만들었습니다.
@/src 이 코드 베이스의 디자인 스타일과 디자인 요소(color palette 와 syling)을 조사해서 src 폴더 내의 docs에 design.md로 만들어 줘.그 다음에 이전의 길었던 프롬프트를 XML로 재구조화했습니다.
<prompt>
<instruction>
<goal>AI News를 주제로 반응형 웹 사이트를 만들어 줘.</goal>
<period>3일마다 다시 만들어 줘.</period>
<format>모든 소식에는 원본을 확인할 수 있는 링크를 달아 줘.</format>
<design>웹 사이트 디자인은 첨부한 md 파일을 참고해 줘.</design>
</instruction>
<data>
<openai>
<url>https://openai.com/news/</url>
<openai-count>10</openai-count>
</openai>
<anthropic>
<url>https://www.anthropic.com/news</url>
<anthropic-count>10</anthropic-count>
</anthropic>
<gemini>
<url>https://blog.google/products/gemini/</url>
<gemini-count>10</gemini-count>
</gemini>
<genspark>
<url>https://www.youtube.com/@genspark_ai</url>
<genspark-count>5</genspark-count>
</genspark>
<cursor>
<url>https://x.com/cursor_ai?lang=en</url>
<cursor-count>5</cursor-count>
</cursor>
<figma>
<url>https://x.com/figma?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor</url>
<figma-count>5</figma-count>
</figma>
<flowith>
<url>https://www.youtube.com/@flowith_ai</url>
<flowith-count>3</flowith-count>
</flowith>
<mcp>
<url>https://www.youtube.com/results?search_query=MCP</url>
<mcp-count>5</mcp-count>
</mcp>
<perplexity>
<url>https://www.youtube.com/channel/UCYqxnCFtaC4-iC_bwt2bRLg</url>
<perplexity-count>2</perplexity-count>
</perplexity>
</data>
</prompt>결과와 배운 점/
디자인도 조금 나아지고, 스케줄링도 정상적으로 되네요. 반응형 웹도 잘 됩니다.
한국 뉴스 - 스크린 샷 썸네일
Open AI 뉴스 페이지의 스크린 샷
근데 OpenAI와 Anthropic, Gemini의 원본 링크가 깨지네요.
그래도, 그럭저럭 만족입니다.
이제 3일에 한 번씩 들어가보려구요.
