루프 @day_loop_

웹 앱 퀄리티를 확 올리고 싶다면 여기 참고해보세요! 코드 복붙 가능! 웹 앱 필수 트랜지션 컬렉션 ✨ transitions.dev 웹 앱을 만들 때 가장 신경 쓰이는 부분 중 하나가 바로 부드럽고 자연스러운 트랜지션.. 하지만 이게.. 직접 만들려면 타이밍, 여러 요소 간의 조화까지 신경 써야 해서 생각보다 시간이 많이 걸려요. 여기에서 다양하게 참고해보세요. 계속 업데이트 됨.. AI 코딩 에이전트용 Skill로도 배포됐습니다. > npx skills add jakubantalik/transitions-dev 모달, 드롭다운, 카드 리사이즈, 숫자 카운트업, 아이콘 스왑 등 실제 웹 앱에서 자주 쓰이는 패턴들의 고품질 CSS 트랜지션 제공 👍🏻👍🏻 각 트랜지션은 실제로 작동하는 데모로 확인할 수 있어요. 그냥 복사해서 붙여넣기만 하면 끝...

keyboard_arrow_left Previous keyboard_arrow_right Next

Jakub Antalik @Jakubantalik

3 weeks ago

Added 3 new transitions to transitions.dev. You can grab them as a code or install them with the others as a skill npx skills add jakubantalik/transitions-dev

13 56 1K 84K 2K

Claude Code로 인터랙티브 웹 만드는 튜토리얼인데 프론트엔드 개발자라면 북마크 해놨다가 시도해보셈. 복잡한 애니메이션 로직이랑 상태 관리를 CLI 환경에서 어떻게 처리하는지 뜯어보기 좋음. 나중에 프로토타이핑 속도 올릴 때 이 워크플로우 그대로 베껴 쓰면 시간 꽤 아낄 듯..

Viktor Oddy @viktoroddy

4 weeks ago

❤️‍🔥 Just recorded a full tutorial on how to use Claude Code to build interactive animated websites Reposting this from yesterday with some improvements

8 75 949 170K 2K

【 文字のアニメーション100選 】 Webサイトに動きが欲しい。 でも、何て指示すれば良いの？ そんな疑問を解決するサイトを作りました。アニメーション名・デモ・コードコピーを100個掲載しています。もうアニメーションを指示する際に迷うことはなくなると思います。（100個から1個を選ぶ大変さはあるかもw） 🔽 Webサイトはリプに掲載

汇集一下 DESIGN.md 工具网站： 1. styles.refero.design 2. neuform.ai 3. designmd.me 4. designmd.supply 5. getdesign.md 6. github.com/bergside/desig… 个人推荐 refero，提供了 2,000+ DESIGN.md，以及支持 DESIGN.md、Tailwind v4、 CSS Variables 和 Design Tokens 最全面的配置输出。 neuform 给我的视觉体验更好，除了 getdesign md，其他全都支持输入任意网站生成设计规范和配置，design-md-chrome 则是 chrome 的扩展适合即开即用。

me before knowing about GitHub Student Pack: 💸💸💸 me after: > JetBrains: free > Figma: free > Notion: free > Canva Pro: free > Cursor Pro: free > Azure $200: free > Amazon Prime 6mo: free

Ridark @ridark_eth

a month ago

x.com/i/article/2051…

25 18 262 280K 796

The entire RAG industry is about to get cooked. Researchers have built a new RAG approach that: - does not need a vector DB. - does not embed data. - involves no chunking. - performs no similarity search. It's called PageIndex. Instead of chunking your docs and stuffing them into pinecone, it builds a tree index and lets the LLM reason through it like a human reading a book. hit 98.7% on financebench. beats every vector RAG on the leaderboard. no embeddings. no chunking. no vector DB. 100% open source.

Agents make ugly UIs because they've never seen good design. We've been fixing that, 2,000 DESIGN.md files from the world's best products, structured for a model to read and learn. Colors, type, spacing, layouts and more. Free. styles.refero.design

このChrome拡張初めて知ったけど、めちゃくちゃ有能だわwwww DESIGN.md Style Extractor： 気になったWebページを開いて拡張機能を1クリックすると、AIに食わせるための DESIGN.md / SKILL.md を自動生成してくれる。 ここから↓ chromewebstore.google.com/detail/designm…

Han clonado Claude Design y puedes usarlo gratis y sin limites. Se llama Open Design, un proyecto open source que te deja usar Claude para workflows de diseño sin pagar. Sin suscripciones. Sin límites (como la versión oficial). Acceso total. Esto es lo que puedes hacer: — Generar diseños UI/UX con Claude — Convertir prompts en diseños reales — Sustituir herramientas de diseño caras en muchos casos — Personalizarlo completamente (es open source) Está hecho para devs, indie hackers y creadores que no quieren quemar dinero en herramientas. De esos repos que pasan desapercibidos hasta que de repente todo el mundo los usa. Si usas AI + diseño, tienes que probarlo Enlace abajo 👇 (guárdalo antes de que explote)

MCP 서버 제대로 만들고 싶으면 딴 소리 말고 이거 보면 됨. 만든 사람이 직접 등판해서 14분 동안 엑기스만 털어주는데 퀄리티가 아예 다름. 요즘 AI 에이전트니 뭐니 해도 결국 데이터 빨인데 그 통로 뚫는 법을 확실히 알려줌. 어설픈 튜토리얼 백 개보다 원작자 직강 하나가 훨씬 영양가 있음 ㅋㅋㅋ

Avid @Av1dlive

a month ago

This 14-minute talk by the Creator of MCP will teach you more about building them than most developers figure out on their own in a year. Bookmark this & watch, no matter what. Then Read the guide below by this builder

27 139 791 166K 2K

Crea vídeos con HTML, CSS y JS. ¿Cómo? Instalando una sola Agent Skill. Se llama HyperFrames, es de código abierto y funciona con cualquier IA. El resultado es tremendo. → github.com/heygen-com/hyp…

으앗.. 이 소식을 이제봤는데 다시 볼 수 있는 방법이 있나요..?

토스 프론트엔드 @TossFrontend

a month ago

오늘 저녁 7시 30분! 여러분들의 성원에 힘입어, 라이브 링크를 공개합니다.🔥 라이브 모닥불 "토스 FE는 AI를 이렇게 씁니다" youtube.com/live/GfC-PcXO4… 그럼, 곧 만나요!

0 3 22 2K 8

Designers have been begging Figma to lower prices for 5 years. A team in Spain just made the entire conversation pointless. They built Penpot. Its a open source, self-hosted, and does everything Figma does including real-time collaboration, prototyping, design systems, and an AI assistant. One Docker command. Unlimited everything. Zero per-seat licensing. This is catastrophic news for the design SaaS industry. Please ignore it completely. Link below so you know exactly which website is the problem. penpot.app/self-host github.com/penpot/penpot

想把某个网站快速“复刻”成自己的React项目？ Firecrawl团队刚开源的 Open Lovable 直接把这事干成了黑科技！ GitHub已冲到 24k+ Star。 玩法极简：把任意网站链接丢进去，几秒钟就能生成一个高度还原的React版本——布局、样式、交互都尽量贴近原站，复杂页面也稳。 核心亮点： • 一键克隆任意网站为React App • 支持OpenAI、Anthropic、Gemini、Grok等多种模型 • 基于Firecrawl抓取结构，还原度更高、更一致 • 边生成边预览，所见即所得，支持本地调试部署 • 集成E2B沙盒，运行测试更安全 MIT协议，完全开源。拉下来配好API Key就能跑。 前端开发者、独立开发者、想快速验证想法的人，这工具能省下无数时间，直接把“抄作业”变成生产力。 GitHub：github.com/mendableai/ope… 已star的扣“已冲”，还没看的快去！

1인 개발자들한테는 이런 게 진짜 구원이다. 코딩 다 하고 스크린샷까지 예쁘게 뽑으려면 기운 다 빠지는데 세상 참 좋아졌네. 이제 스크린샷 못생겨서 앱 안 받는다는 핑계도 안 통할 정도로 상향 평준화될 듯.

Charly Wargnier @DataChaz

a month ago

here's a massive cheat code for Apple App Store screenshots. With @anything, you can now generate them in seconds 👀

10 44 202 67K 278

Introducing Claude Design by Anthropic Labs: make prototypes, slides, and one-pagers by talking to Claude. Powered by Claude Opus 4.7, our most capable vision model. Available in research preview on the Pro, Max, Team, and Enterprise plans, rolling out throughout the day.

Figma charges $15/user/month. Webflow charges $29/month. Someone built an open source design tool where you visually edit your React app and the code writes itself. 23,900 stars. Free. It's called Onlook. The Cursor for Designers. You see your live React app. You click on any element. You drag, resize, restyle. The code updates in real time. In your actual codebase. Not a mockup. Not a prototype. Your real app. No exporting. No handoff. No "developer please rebuild this from my Figma file." Here's what Onlook does: → Open your existing React project. See it visually. → Click any element. Edit styles, layout, spacing, colors. Visually. → AI generates new components, pages, and sections from prompts. → Every visual change writes clean code directly to your files. → No separate design file. Your design IS your code. Your code IS your design. → Works with your existing React and Next.js projects. No migration. → Desktop app for Mac, Windows, and Linux. Here's the wildest part: Designers and developers have been fighting over the same problem for 20 years. Designer makes a mockup. Developer rebuilds it from scratch. Designer says "that's not what I designed." Developer says "that's not how code works." Onlook kills this loop. The designer edits the actual app. The code updates automatically. There's nothing to hand off. There's nothing to rebuild. There's nothing to argue about. Figma: $15/user/month. Webflow: $29/month. Framer: $20/month. Design agencies charge $150/hour. This is free. Open source. Apache 2.0 License. 23.9K GitHub stars. 1.8K forks. 1,634 commits. 100% Open Source.

Existe una web que te permite convertir cualquier SVG en un objeto 3D. No tiene coste, es open-source y te permite girarlo, animarlo, integrarlo en tu web y exportarlo como imagen o vídeo en 4K.

Web Designers and Developers, this might be the next-level animation library ReactBits gives you a growing collection of smooth, modern UI animations you can plug straight into your projects. Bookmark it for later 💜

Storybook 10.3 is out! ✨ Storybook MCP for React ♿ A11y overhaul fixes 100s of issues 🧑‍💻 CLI overhaul for faster, more reliable install 💅 New Viewports and Zoom UI ✅ New onboarding guide 🏭 Type-safe CSF factories for Vue, Angular, and Web Components Take a look ⤵️