Task
Explore CodeParrot Functionality
As a potential user of CodeParrot,, I understand how the platform can help me streamline frontend development processes, so that I can decide whether to adopt this tool for my projects.
Success definition: Given I am on the CodeParrot homepage When I click on the About Us link and then navigate to the How it Works section Then I should see a detailed explanation of CodeParrots functionality and the benefits it offers for frontend development.
Trajectory
Step 1:
Url (before/after):
https://codeparrot.ai/
https://codeparrot.ai/about
Content (before/after):
RootWebArea CodeParrot | Design to Code Copilot, focused, url='https://codeparrot.ai/'
main
[46] link logo, center=(356,41), url='https://codeparrot.ai/'
image logo, url='https://codeparrot.ai/logo.svg'
[48] link CodeParrot AI, center=(473,41), url='https://codeparrot.ai/'
Show more
navigation
[55] link About Us About Us, center=(807,41), inner_text=About Us
About Us, url='https://codeparrot.ai/about'
StaticText About Us
StaticText About Us
[60] link How it Works How it Works, center=(931,41), inner_text=How it Works
How it Works, url='https://codeparrot.ai/docs/quick-start'
StaticText How it Works
StaticText How it Works
[65] link Pricing Pricing, center=(1046,41), inner_text=Pricing
Pricing, url='https://codeparrot.ai/pricing'
StaticText Pricing
StaticText Pricing
[70] link Blog Blog, center=(1130,41), inner_text=Blog
Blog, url='https://codeparrot.ai/blogs'
StaticText Blog
StaticText Blog
[76] link Start for Free Start for Free Stars Icon, center=(1491,41), inner_text=Start for Free
Start for Free, url='https://marketplace.visualstudio.com/items?itemName=CodeParrot-ai.codeParrot'
StaticText Start for Free
StaticText Start for Free
image Stars Icon, url='https://codeparrot.ai/_next/static/media/stars-2.f9c117b8.svg'
image Semi Circle, url='https://codeparrot.ai/_next/static/media/half-circle.e364796d.svg'
image Stars, url='https://codeparrot.ai/_next/static/media/stars.f74670e7.svg'
image Backed by YC, url='https://codeparrot.ai/_next/static/media/backed-by-yc.248418cc.svg'
heading Ship Stunning UI Lightning Fast
paragraph
StaticText Production Ready Frontend Pages in minutes using Figma Designs
StaticText or Screenshots.
[96] link Let’s get started Let’s get started Stars Icon, center=(817,591), inner_text=Let’s get started
Let’s get started, url='https://marketplace.visualstudio.com/items?itemName=CodeParrot-ai.codeParrot'
StaticText Let’s get started
StaticText Let’s get started
image Stars Icon, url='https://codeparrot.ai/_next/static/media/stars-1.87192ba7.svg'
[102] link Schedule a demo Schedule a demo Calendar Icon, center=(1100,591), inner_text=Schedule a demo
Schedule a demo, url='https://tidycal.com/royal1/codeparrot-contact-us'
StaticText Schedule a demo
StaticText Schedule a demo
image Calendar Icon, url='https://codeparrot.ai/_next/static/media/cp-icons.57f4cb8f.svg'
[a] Iframe YouTube video player, center=(960,951), title=YouTube video player
RootWebArea Fastrack Frontend Development using CodeParrot - YouTube, url='https://www.youtube.com/embed/G-MO4qnC3t8'
[a30] link Photo image of royal jain, center=(513,759)
[a38] link Fastrack Frontend Development using CodeParrot, center=(951,760), url='https://www.youtube.com/watch?v=G-MO4qnC3t8'
[a55] button Share, center=(1393,757), hasPopup='menu'
image
[a92] button Play, center=(960,951)
image
generic, atomic
[a318] link Watch on YouTube, center=(567,1146), url='https://www.youtube.com/watch?v=G-MO4qnC3t8&embeds_referring_euri=https%3A%2F%2Fcodeparrot.ai%2F'
image Video Background, url='https://codeparrot.ai/_next/static/media/video-bg.ca483fbd.svg'
heading Works with your favourite tech stack
image CSS3 Icon, url='https://codeparrot.ai/_next/static/media/svg-1969111455-307.2e9c8e4d.svg'
image HTML5 Icon, url='https://codeparrot.ai/_next/static/media/svg-283109218-298.510f09ad.svg'
image JavaScript Icon, url='https://codeparrot.ai/_next/static/media/svg-1910193093-793.f75ae575.svg'
image Node.js Icon, url='https://codeparrot.ai/_next/static/media/svg-1496786325-1965.a95de6f6.svg'
image Vue.js Icon, url='https://codeparrot.ai/_next/static/media/svg-141712239-759.e8f4d10e.svg'
image CodePen Icon, url='https://codeparrot.ai/_next/static/media/svg-1681413725-631.bda99a46.svg'
heading Engineers from startups to Fortune 500 use CodeParrot to build Faster
image Mercedes-Benz, url='https://codeparrot.ai/_next/static/media/frame.b97c459d.svg'
image Accenture, url='https://codeparrot.ai/_next/static/media/frame-2.150e4384.svg'
image Bajaj Finserv, url='https://codeparrot.ai/_next/static/media/frame-3.4b50b3f7.svg'
image LinkedIn, url='https://codeparrot.ai/_next/static/media/frame-4.c86999ba.svg'
image Udaan, url='https://codeparrot.ai/_next/static/media/frame-5.2ffa00d3.svg'
image Freshworks, url='https://codeparrot.ai/_next/static/media/frame-6.44c72376.svg'
image Capgemini, url='https://codeparrot.ai/_next/static/media/frame-7.56e7479f.svg'
image DuckDuckGo, url='https://codeparrot.ai/_next/static/media/duckduckgo-2-1.e551fbb6.svg'
image Infosys, url='https://codeparrot.ai/_next/static/media/frame-8.e74331c4.svg'
image Mercedes-Benz, url='https://codeparrot.ai/_next/static/media/frame.b97c459d.svg'
image Accenture, url='https://codeparrot.ai/_next/static/media/frame-2.150e4384.svg'
image Bajaj Finserv, url='https://codeparrot.ai/_next/static/media/frame-3.4b50b3f7.svg'
image LinkedIn, url='https://codeparrot.ai/_next/static/media/frame-4.c86999ba.svg'
image Udaan, url='https://codeparrot.ai/_next/static/media/frame-5.2ffa00d3.svg'
image Freshworks, url='https://codeparrot.ai/_next/static/media/frame-6.44c72376.svg'
image Capgemini, url='https://codeparrot.ai/_next/static/media/frame-7.56e7479f.svg'
image DuckDuckGo, url='https://codeparrot.ai/_next/static/media/duckduckgo-2-1.e551fbb6.svg'
image Infosys, url='https://codeparrot.ai/_next/static/media/frame-8.e74331c4.svg'
image PwC, url='https://codeparrot.ai/_next/static/media/frame-9.7bda07fb.svg'
image Emeritus, url='https://codeparrot.ai/_next/static/media/frame-10.e8fa9204.svg'
image Housing.com, url='https://codeparrot.ai/_next/static/media/frame-11.85ff4c47.svg'
image Rocketium, url='https://codeparrot.ai/_next/static/media/frame-12.eff11d2f.svg'
image United States Steel, url='https://codeparrot.ai/_next/static/media/frame-13.44fe2fb0.svg'
image Comcast, url='https://codeparrot.ai/_next/static/media/frame-14.cd08a4d4.svg'
image Games24x7, url='https://codeparrot.ai/_next/static/media/frame-15.ffabda5d.svg'
image Cisco, url='https://codeparrot.ai/_next/static/media/frame-16.8c70c8d1.svg'
image PagerDuty, url='https://codeparrot.ai/_next/static/media/logo-pagerduty.b994800c.svg'
image PwC, url='https://codeparrot.ai/_next/static/media/frame-9.7bda07fb.svg'
image Emeritus, url='https://codeparrot.ai/_next/static/media/frame-10.e8fa9204.svg'
image Housing.com, url='https://codeparrot.ai/_next/static/media/frame-11.85ff4c47.svg'
image Rocketium, url='https://codeparrot.ai/_next/static/media/frame-12.eff11d2f.svg'
image United States Steel, url='https://codeparrot.ai/_next/static/media/frame-13.44fe2fb0.svg'
image Comcast, url='https://codeparrot.ai/_next/static/media/frame-14.cd08a4d4.svg'
image Games24x7, url='https://codeparrot.ai/_next/static/media/frame-15.ffabda5d.svg'
image Cisco, url='https://codeparrot.ai/_next/static/media/frame-16.8c70c8d1.svg'
image PagerDuty, url='https://codeparrot.ai/_next/static/media/logo-pagerduty.b994800c.svg'
image Code Icon, url='https://codeparrot.ai/_next/static/media/code.890d192c.svg'
StaticText Fast-Tracking
StaticText UI Development for
StaticText {Full Stack Developers}
StaticText {Frontend Engineers}
StaticText {Founders}
image Support Icon, url='https://codeparrot.ai/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsupport.9fb9c56a.png&w=3840&q=75'
heading Build on your Existing Projects
paragraph
StaticText Build new screens using existing components and libraries
Canvas
heading Coding Standards
paragraph
StaticText Follows your coding standards to get the code as you like it
Canvas
heading Build in minutes, not days
paragraph
StaticText Review and Refine UI components instead of starting from scratch
Canvas
heading Add to your existing workflow
paragraph
StaticText IDE plugins to ensure zero context switches.
Canvas
image background, url='https://codeparrot.ai/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fbg.4471923f.png&w=3840&q=75'
StaticText Why CodeParrot?
image logos, url='https://codeparrot.ai/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogos.2fffeaa9.png&w=1200&q=75'
StaticText Imagine if Figma and Github Copilot had a baby.
StaticText CodeParrot is the only UI generation platform which understands your codebase. Build new pages in minutes using your existing components and coding standards.
image credit card, url='https://codeparrot.ai/_next/static/media/card.1865f538.svg'
heading Find your perfect plan
heading Free to start, no credit card required. Try our 14 days free trial now.
link Let’s get started Let’s get started Star, url='https://marketplace.visualstudio.com/items?itemName=CodeParrot-ai.codeParrot'
StaticText Let’s get started
StaticText Let’s get started
image Star, url='https://codeparrot.ai/_next/static/media/stars-1.87192ba7.svg'
LabelText
StaticText Monthly Pricing
checkbox Monthly Pricing Annual Pricing, checked='false'
StaticText Annual Pricing
heading Pro
paragraph
StaticText Perfect for building and scaling projects.
StaticText $
StaticText 19
StaticText / seat
link Upgrade now Upgrade now Upgrade, url='https://dashboard.codeparrot.ai/subscription'
StaticText Upgrade now
StaticText Upgrade now
image Upgrade, url='https://codeparrot.ai/_next/static/media/upgrade.014c25f2.svg'
image feature icon, url='https://codeparrot.ai/_next/static/media/check-circled-opacity.92f40fe8.svg'
StaticText Figma to code
image feature icon, url='https://codeparrot.ai/_next/static/media/check-circled-opacity.92f40fe8.svg'
StaticText Screenshot to code
image feature icon, url='https://codeparrot.ai/_next/static/media/check-circled-opacity.92f40fe8.svg'
StaticText Use custom themes
image feature icon, url='https://codeparrot.ai/_next/static/media/check-circled-opacity.92f40fe8.svg'
StaticText Use custom components
heading Team
paragraph
StaticText Perfect for building and scaling projects.
StaticText $
StaticText 39
StaticText / seat
StaticText (min. 3 seats)
link Upgrade now Upgrade now Upgrade, url='https://dashboard.codeparrot.ai/subscription'
StaticText Upgrade now
StaticText Upgrade now
image Upgrade, url='https://codeparrot.ai/_next/static/media/upgrade.014c25f2.svg'
image feature icon, url='https://codeparrot.ai/_next/static/media/check-circled-opacity.92f40fe8.svg'
StaticText Everything in Pro
image feature icon, url='https://codeparrot.ai/_next/static/media/check-circled-opacity.92f40fe8.svg'
StaticText Add your component libraries to CodeParrot context
image feature icon, url='https://codeparrot.ai/_next/static/media/check-circled-opacity.92f40fe8.svg'
StaticText Build your own AI agents for storybook, testing and refactoring (coming soon)
heading Enterprise
paragraph
StaticText Privacy ensured. Perfect for large companies with data security in mind.
link Get in touch Get in touch Calendar, url='https://tidycal.com/royal1/codeparrot-contact-us'
StaticText Get in touch
StaticText Get in touch
image Calendar, url='https://codeparrot.ai/_next/static/media/calendar.57f4cb8f.svg'
image feature icon, url='https://codeparrot.ai/_next/static/media/check-circled-opacity.92f40fe8.svg'
StaticText Everything in Team
image feature icon, url='https://codeparrot.ai/_next/static/media/check-circled-opacity.92f40fe8.svg'
StaticText No Third Party API calls.
image feature icon, url='https://codeparrot.ai/_next/static/media/check-circled-opacity.92f40fe8.svg'
StaticText Data scrubbing after every request
image Discord, url='https://codeparrot.ai/_next/static/media/privacy.04cfc436.svg'
StaticText Privacy Ensured.
paragraph
StaticText Zero Data Retention Policy ensures that we do not store any of your data. Your privacy is our top priority.
heading Exceptional user satisfaction
link Schedule a demo Schedule a demo Calendar, url='https://tidycal.com/royal1/codeparrot-contact-us'
StaticText Schedule a demo
StaticText Schedule a demo
image Calendar, url='https://codeparrot.ai/_next/static/media/calendar.73295ca5.svg'
image Quote, url='https://codeparrot.ai/_next/static/media/quote.918dd155.svg'
paragraph
StaticText ‘’It's amazing and very helpful, the contextual algo works really good. Able to speed up mundane tasks using it.’’
image Vandan Chauhan, url='https://codeparrot.ai/_next/image?url=https%3A%2F%2Fmedia.licdn.com%2Fdms%2Fimage%2FC5603AQFGPXMowchogg%2Fprofile-displayphoto-shrink_200_200%2F0%2F1639907455804%3Fe%3D1724284800%26v%3Dbeta%26t%3Dkk_wu_MlJLqEZmihRsE55iemM4waB5DNoS4YmLW9Qz4&w=48&q=75'
heading Vandan Chauhan
paragraph
StaticText Senior Frontend Engineer, Mailmodo
image Quote, url='https://codeparrot.ai/_next/static/media/quote.918dd155.svg'
paragraph
StaticText ‘’It's been a long sime since I've had such a "WOW" experience with a product. This will speed up our frontend development so much I cannot imagine the impact.’’
image Francisco Parga, url='https://codeparrot.ai/_next/image?url=https%3A%2F%2Fmedia.licdn.com%2Fdms%2Fimage%2FC4D0BAQGWIfYzFtQW6Q%2Fcompany-logo_200_200%2F0%2F1669718703641%2Fmenhir_logo%3Fe%3D1726704000%26v%3Dbeta%26t%3D7eBElEsCX5OcSb_bq43xtv3wcsI0zOTvQF5T2kFgalM&w=48&q=75'
heading Francisco Parga
paragraph
StaticText Founder, Menhir AI
image Quote, url='https://codeparrot.ai/_next/static/media/quote.918dd155.svg'
paragraph
StaticText ‘’We've been using CodeParrot! Pretty amazing product you are building’’
image Preju Kanuparthy, url='https://codeparrot.ai/_next/image?url=https%3A%2F%2Fmedia.licdn.com%2Fdms%2Fimage%2FD5603AQHzcEhk7IyiGQ%2Fprofile-displayphoto-shrink_200_200%2F0%2F1679522191171%3Fe%3D1724284800%26v%3Dbeta%26t%3DBLQdytKU1btnpBKPtgVSXDGTZPa9kXfvuSZ0JEfYb48&w=48&q=75'
heading Preju Kanuparthy
paragraph
StaticText Founder, Genesis Rum
image Quote, url='https://codeparrot.ai/_next/static/media/quote.918dd155.svg'
paragraph
StaticText ‘’I had the opportunity to test it, and I found it to be an impressive and innovative tool. It shows great potential in converting Figma files to production-ready code while reusing existing components and adhering to coding standards.’’
image Ahmad Jafari, url='https://codeparrot.ai/_next/image?url=https%3A%2F%2Fmedia.licdn.com%2Fdms%2Fimage%2FD5603AQFXyCD6D-hUWg%2Fprofile-displayphoto-shrink_200_200%2F0%2F1670967339886%3Fe%3D1724284800%26v%3Dbeta%26t%3Dw5yDEjqkneKqoZm2Js6LAXg76zIH5yh4aEdn0ubRIUk&w=48&q=75'
heading Ahmad Jafari
paragraph
StaticText Senior Front-end Developer, Avicenna Research
image Quote, url='https://codeparrot.ai/_next/static/media/quote.918dd155.svg'
paragraph
StaticText ‘’This plugin offers fantastic opportunities for JavaScript/TypeScript frontend development. If you have a Figma project or a simple picture of a website, you can create websites in just a few hours or improve your existing code. I decided to create a project using Angular 18 (you can use React, Vue, etc), TypeScript, and SCSS. By asking CodeParrot a few questions, the main files were generated in no time.’’
image Igor Aniskevich, url='https://codeparrot.ai/_next/image?url=https%3A%2F%2Fmedia.licdn.com%2Fdms%2Fimage%2FD4D03AQFlzMPjAdAHVw%2Fprofile-displayphoto-shrink_200_200%2F0%2F1677848412669%3Fe%3D1724284800%26v%3Dbeta%26t%3DOAWjPvMVNj3E0EU6YH6qlzL2dnn61L7jBLNhCUQl_BM&w=48&q=75'
heading Igor Aniskevich
paragraph
StaticText Frontend Engineer, BelVG
image Quote, url='https://codeparrot.ai/_next/static/media/quote.918dd155.svg'
paragraph
StaticText ‘’In the past, translating designs into code was always a boring and time-consuming process. But with CodeParrot, everything has changed! I simply uploaded my design, configured the desired code settings, and in a matter of seconds, I had ready-to-use code. Furthermore, CodeParrot can take reference from Figma, a design application, which makes the process even more convenient and faster. CodeParrot is a real must-have for any developer who wants to: Reduce UI development time, Improve code quality, Focus on more creative tasks’’
image Maksim Liashch, url='https://codeparrot.ai/_next/image?url=https%3A%2F%2Fmedia.licdn.com%2Fdms%2Fimage%2FD4D03AQE4vf2QiNxdnA%2Fprofile-displayphoto-shrink_200_200%2F0%2F1718259515119%3Fe%3D1724889600%26v%3Dbeta%26t%3DBhgO-YuWCnRVcGpxCRq0rzKjf7gSXRYOFMiEz4Yi0bg&w=48&q=75'
heading Maksim Liashch
paragraph
StaticText Co-Founder, Buy It Marketplace
image Quote, url='https://codeparrot.ai/_next/static/media/quote.918dd155.svg'
paragraph
StaticText ‘’I love it. This is an amazing tool that converts Figma designs into clear code. It allows for easy import and quick processing of Figma files. It fits seamlessly into various workflows by offering customization options and support for frameworks like React, Vue, and Angular. Thank you buddy for suggesting. ❤️ It.’’
image Palak Soni, url='https://codeparrot.ai/_next/image?url=https%3A%2F%2Fmedia.licdn.com%2Fdms%2Fimage%2FD4D03AQGQtirSj-7zsQ%2Fprofile-displayphoto-shrink_200_200%2F0%2F1715838875070%3Fe%3D1724889600%26v%3Dbeta%26t%3DwAxObcD1Nl4kBU5cyQRPpQWU1_Hmft_MGdvsUceEIG0&w=48&q=75'
heading Palak Soni
paragraph
StaticText Frontend UI Developer, Marastu
image Quote, url='https://codeparrot.ai/_next/static/media/quote.918dd155.svg'
paragraph
StaticText ‘’I was really excited by what I saw Code Parrot do ! It's really nice it auto downloads images as SVGs.’’
StaticText DM
heading Dave Mays
paragraph
StaticText Frontend Engineer
image Quote, url='https://codeparrot.ai/_next/static/media/quote.918dd155.svg'
paragraph
StaticText ‘’A special thanks to @codeparrotAI for creating a fantastic product with AI! We used Codeparrot for one of our client’s projects and completed the front end part using it. It literally saved us so much time!All the best!’’
StaticText D
heading Deepak
paragraph
StaticText Cofounder, FileCentral.io
image Quote, url='https://codeparrot.ai/_next/static/media/quote.918dd155.svg'
paragraph
StaticText ‘’I used the CodeParrot AI tool for VS Code and it was great. I worked with Angular, SCSS, and TypeScript, and added a Figma design link. The tool did an excellent job converting the design into code. It really made my work easier and faster. Overall, it's a fantastic tool for developers. 🙂’’
image Aya Abdelaziz, url='https://codeparrot.ai/_next/image?url=https%3A%2F%2Fmedia.licdn.com%2Fdms%2Fimage%2FD4E35AQGQjWMXfupo1g%2Fprofile-framedphoto-shrink_400_400%2F0%2F1721031276501%3Fe%3D1721725200%26v%3Dbeta%26t%3DB4frRnQrMcR9pPa3E_1agtVzPIMVZYESYd5_42lHmYI&w=48&q=75'
heading Aya Abdelaziz
paragraph
StaticText Senior Frontend Developer, Cegedim
image Quote, url='https://codeparrot.ai/_next/static/media/quote.918dd155.svg'
paragraph
StaticText ‘’It's amazing and very helpful, the contextual algo works really good. Able to speed up mundane tasks using it.’’
image Vandan Chauhan, url='https://codeparrot.ai/_next/image?url=https%3A%2F%2Fmedia.licdn.com%2Fdms%2Fimage%2FC5603AQFGPXMowchogg%2Fprofile-displayphoto-shrink_200_200%2F0%2F1639907455804%3Fe%3D1724284800%26v%3Dbeta%26t%3Dkk_wu_MlJLqEZmihRsE55iemM4waB5DNoS4YmLW9Qz4&w=48&q=75'
heading Vandan Chauhan
paragraph
StaticText Senior Frontend Engineer, Mailmodo
image Quote, url='https://codeparrot.ai/_next/static/media/quote.918dd155.svg'
paragraph
StaticText ‘’It's been a long sime since I've had such a "WOW" experience with a product. This will speed up our frontend development so much I cannot imagine the impact.’’
image Francisco Parga, url='https://codeparrot.ai/_next/image?url=https%3A%2F%2Fmedia.licdn.com%2Fdms%2Fimage%2FC4D0BAQGWIfYzFtQW6Q%2Fcompany-logo_200_200%2F0%2F1669718703641%2Fmenhir_logo%3Fe%3D1726704000%26v%3Dbeta%26t%3D7eBElEsCX5OcSb_bq43xtv3wcsI0zOTvQF5T2kFgalM&w=48&q=75'
heading Francisco Parga
paragraph
StaticText Founder, Menhir AI
image Quote, url='https://codeparrot.ai/_next/static/media/quote.918dd155.svg'
paragraph
StaticText ‘’We've been using CodeParrot! Pretty amazing product you are building’’
image Preju Kanuparthy, url='https://codeparrot.ai/_next/image?url=https%3A%2F%2Fmedia.licdn.com%2Fdms%2Fimage%2FD5603AQHzcEhk7IyiGQ%2Fprofile-displayphoto-shrink_200_200%2F0%2F1679522191171%3Fe%3D1724284800%26v%3Dbeta%26t%3DBLQdytKU1btnpBKPtgVSXDGTZPa9kXfvuSZ0JEfYb48&w=48&q=75'
heading Preju Kanuparthy
paragraph
StaticText Founder, Genesis Rum
image Quote, url='https://codeparrot.ai/_next/static/media/quote.918dd155.svg'
paragraph
StaticText ‘’I had the opportunity to test it, and I found it to be an impressive and innovative tool. It shows great potential in converting Figma files to production-ready code while reusing existing components and adhering to coding standards.’’
image Ahmad Jafari, url='https://codeparrot.ai/_next/image?url=https%3A%2F%2Fmedia.licdn.com%2Fdms%2Fimage%2FD5603AQFXyCD6D-hUWg%2Fprofile-displayphoto-shrink_200_200%2F0%2F1670967339886%3Fe%3D1724284800%26v%3Dbeta%26t%3Dw5yDEjqkneKqoZm2Js6LAXg76zIH5yh4aEdn0ubRIUk&w=48&q=75'
heading Ahmad Jafari
paragraph
StaticText Senior Front-end Developer, Avicenna Research
image Quote, url='https://codeparrot.ai/_next/static/media/quote.918dd155.svg'
paragraph
StaticText ‘’This plugin offers fantastic opportunities for JavaScript/TypeScript frontend development. If you have a Figma project or a simple picture of a website, you can create websites in just a few hours or improve your existing code. I decided to create a project using Angular 18 (you can use React, Vue, etc), TypeScript, and SCSS. By asking CodeParrot a few questions, the main files were generated in no time.’’
image Igor Aniskevich, url='https://codeparrot.ai/_next/image?url=https%3A%2F%2Fmedia.licdn.com%2Fdms%2Fimage%2FD4D03AQFlzMPjAdAHVw%2Fprofile-displayphoto-shrink_200_200%2F0%2F1677848412669%3Fe%3D1724284800%26v%3Dbeta%26t%3DOAWjPvMVNj3E0EU6YH6qlzL2dnn61L7jBLNhCUQl_BM&w=48&q=75'
heading Igor Aniskevich
paragraph
StaticText Frontend Engineer, BelVG
image Quote, url='https://codeparrot.ai/_next/static/media/quote.918dd155.svg'
paragraph
StaticText ‘’In the past, translating designs into code was always a boring and time-consuming process. But with CodeParrot, everything has changed! I simply uploaded my design, configured the desired code settings, and in a matter of seconds, I had ready-to-use code. Furthermore, CodeParrot can take reference from Figma, a design application, which makes the process even more convenient and faster. CodeParrot is a real must-have for any developer who wants to: Reduce UI development time, Improve code quality, Focus on more creative tasks’’
image Maksim Liashch, url='https://codeparrot.ai/_next/image?url=https%3A%2F%2Fmedia.licdn.com%2Fdms%2Fimage%2FD4D03AQE4vf2QiNxdnA%2Fprofile-displayphoto-shrink_200_200%2F0%2F1718259515119%3Fe%3D1724889600%26v%3Dbeta%26t%3DBhgO-YuWCnRVcGpxCRq0rzKjf7gSXRYOFMiEz4Yi0bg&w=48&q=75'
heading Maksim Liashch
paragraph
StaticText Co-Founder, Buy It Marketplace
image Quote, url='https://codeparrot.ai/_next/static/media/quote.918dd155.svg'
paragraph
StaticText ‘’I love it. This is an amazing tool that converts Figma designs into clear code. It allows for easy import and quick processing of Figma files. It fits seamlessly into various workflows by offering customization options and support for frameworks like React, Vue, and Angular. Thank you buddy for suggesting. ❤️ It.’’
image Palak Soni, url='https://codeparrot.ai/_next/image?url=https%3A%2F%2Fmedia.licdn.com%2Fdms%2Fimage%2FD4D03AQGQtirSj-7zsQ%2Fprofile-displayphoto-shrink_200_200%2F0%2F1715838875070%3Fe%3D1724889600%26v%3Dbeta%26t%3DwAxObcD1Nl4kBU5cyQRPpQWU1_Hmft_MGdvsUceEIG0&w=48&q=75'
heading Palak Soni
paragraph
StaticText Frontend UI Developer, Marastu
image Quote, url='https://codeparrot.ai/_next/static/media/quote.918dd155.svg'
paragraph
StaticText ‘’I was really excited by what I saw Code Parrot do ! It's really nice it auto downloads images as SVGs.’’
StaticText DM
heading Dave Mays
paragraph
StaticText Frontend Engineer
image Quote, url='https://codeparrot.ai/_next/static/media/quote.918dd155.svg'
paragraph
StaticText ‘’A special thanks to @codeparrotAI for creating a fantastic product with AI! We used Codeparrot for one of our client’s projects and completed the front end part using it. It literally saved us so much time!All the best!’’
StaticText D
heading Deepak
paragraph
StaticText Cofounder, FileCentral.io
image Quote, url='https://codeparrot.ai/_next/static/media/quote.918dd155.svg'
paragraph
StaticText ‘’I used the CodeParrot AI tool for VS Code and it was great. I worked with Angular, SCSS, and TypeScript, and added a Figma design link. The tool did an excellent job converting the design into code. It really made my work easier and faster. Overall, it's a fantastic tool for developers. 🙂’’
image Aya Abdelaziz, url='https://codeparrot.ai/_next/image?url=https%3A%2F%2Fmedia.licdn.com%2Fdms%2Fimage%2FD4E35AQGQjWMXfupo1g%2Fprofile-framedphoto-shrink_400_400%2F0%2F1721031276501%3Fe%3D1721725200%26v%3Dbeta%26t%3DB4frRnQrMcR9pPa3E_1agtVzPIMVZYESYd5_42lHmYI&w=48&q=75'
heading Aya Abdelaziz
paragraph
StaticText Senior Frontend Developer, Cegedim
image Discord, url='https://codeparrot.ai/_next/static/media/discord.d5488548.svg'
StaticText Join the community
paragraph
StaticText Meet fellow developers, share feature requests and discuss the future of AI code generation
link Join Discord Join Discord Discord, url='https://discord.gg/pkVaa66Enh'
StaticText Join Discord
StaticText Join Discord
image Discord, url='https://codeparrot.ai/_next/static/media/icons-discord.b8dbc7d8.svg'
image Background, url='https://codeparrot.ai/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fbg.9d37294b.png&w=3840&q=75'
image CodeParrot Logo, url='https://codeparrot.ai/logo.svg'
heading CodeParrot
heading Ship stunning UI Lightning Fast
image Y Combinator, url='https://codeparrot.ai/_next/static/media/backed-by-yc.248418cc.svg'
heading Resources
list
listitem
link Docs, url='https://codeparrot.ai/docs/quick-start'
listitem
link Changelog, url='https://marketplace.visualstudio.com/items/CodeParrot-ai.codeParrot/changelog'
heading Company
list
listitem
link Blog, url='https://codeparrot.ai/blogs'
listitem
link Contact, url='https://tidycal.com/royal1/codeparrot-contact-us'
heading Legal
list
listitem
link Privacy Policy, url='https://codeparrot.ai/docs/privacy-policy'
alert, atomic
RootWebArea About | CodeParrot | Design to Code Copilot, focused, url='https://codeparrot.ai/about'
main
[657] link logo, center=(356,41), url='https://codeparrot.ai/'
image logo, url='https://codeparrot.ai/logo.svg'
[659] link CodeParrot AI, center=(473,41), url='https://codeparrot.ai/'
Show more
navigation
[666] link About Us About Us link, center=(807,41), inner_text=About Us
About Us, url='https://codeparrot.ai/about'
StaticText About Us
StaticText About Us
image link, url='https://codeparrot.ai/_next/static/media/Link.cec83abc.svg'
[673] link How it Works How it Works, center=(931,41), inner_text=How it Works
How it Works, url='https://codeparrot.ai/docs/quick-start'
StaticText How it Works
StaticText How it Works
[678] link Pricing Pricing, center=(1046,41), inner_text=Pricing
Pricing, url='https://codeparrot.ai/pricing'
StaticText Pricing
StaticText Pricing
[683] link Blog Blog, center=(1130,41), inner_text=Blog
Blog, url='https://codeparrot.ai/blogs'
StaticText Blog
StaticText Blog
[689] link Start for Free Start for Free Stars Icon, center=(1491,41), inner_text=Start for Free
Start for Free, url='https://marketplace.visualstudio.com/items?itemName=CodeParrot-ai.codeParrot'
StaticText Start for Free
StaticText Start for Free
image Stars Icon, url='https://codeparrot.ai/_next/static/media/stars-2.f9c117b8.svg'
heading Build things you are proud of
image Image 2, url='https://codeparrot.ai/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FVedant.09950e19.jpg&w=256&q=75'
image Image 1, url='https://codeparrot.ai/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FRoyal.6702c7d2.jpeg&w=640&q=75'
paragraph
StaticText Built by 2 Software Engineers to raise the standards of Digital Experiences
image Stars, url='https://codeparrot.ai/_next/static/media/stars-bg.9e7736fd.svg'
heading Our Story
paragraph
StaticText I remember building a tic tac toe website in the first year of college. Required learning flexbox, css animations and many stack overflow searches. It’s been over 10 years of building web and mobile products, yet my last Chatgpt search was
StaticText “How to center a div”
paragraph
StaticText In that time frame, the number of apps on play store has increased from
StaticText 400k to 3.7 Million
StaticText . Most of them don’t even see hundreds of users. Why?
paragraph
StaticText Because Nobody likes using the second best product
paragraph
StaticText Think about the products you use everyday. Why don’t you use the cheaper alternatives out there? The bar of what a great product is, increases exponentially. It’s like Moore’s law of user experience. Building these delightful experiences is increasingly difficult and time prohibitive.
paragraph
StaticText We started CodeParrot with a singular goal:
paragraph
StaticText Help Developers build products they truly are proud of
image Duo, url='https://codeparrot.ai/_next/static/media/star-mask.8dfd1f49.svg'
heading Meet the duo
image Background Gradient, url='https://codeparrot.ai/_next/static/media/background-gradient.5f8da736.svg'
link X Logo, url='https://x.com/royaljain4'
image X Logo, url='https://codeparrot.ai/_next/static/media/x-logo.5f42625f.svg'
link LinkedIn Logo, url='https://www.linkedin.com/in/royal-jain/'
image LinkedIn Logo, url='https://codeparrot.ai/_next/static/media/linkedin-logo.0bd19d38.svg'
image Profile Picture, url='https://codeparrot.ai/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FRoyal.6702c7d2.jpeg&w=32&q=75'
StaticText Royal
StaticText Jain
StaticText <
link royal@codeparrot.ai, url='mailto:royal@codeparrot.ai'
StaticText >
heading Do more with less
paragraph
StaticText ”Adding manpower to a late software project makes it later”. Great products are not created by huge teams. It's a few scrappy individuals who love what they are building.
image Background Gradient, url='https://codeparrot.ai/_next/static/media/background-gradient.5f8da736.svg'
link X Logo, url='https://x.com/vedantsopinions'
image X Logo, url='https://codeparrot.ai/_next/static/media/x-logo.5f42625f.svg'
link LinkedIn Logo, url='https://www.linkedin.com/in/vedantsopinions/'
image LinkedIn Logo, url='https://codeparrot.ai/_next/static/media/linkedin-logo.0bd19d38.svg'
image Profile Picture, url='https://codeparrot.ai/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FVedant.09950e19.jpg&w=32&q=75'
StaticText Vedant
StaticText Agarwal
StaticText <
link vedant@codeparrot.ai, url='mailto:vedant@codeparrot.ai'
StaticText >
heading Your product reflects your personality
paragraph
StaticText Are you detail oriented? Do you value how people perceive you? As said by Alan Cooper, if you want people to use your software, you should design it to behave like a likeable person
image Code Icon, url='https://codeparrot.ai/_next/static/media/code.890d192c.svg'
StaticText Fasttrack Frontend
StaticText Development using CodeParrot AI
link Let’s get started Let’s get started Stars Icon, url='https://marketplace.visualstudio.com/items?itemName=CodeParrot-ai.codeParrot'
StaticText Let’s get started
StaticText Let’s get started
image Stars Icon, url='https://codeparrot.ai/_next/static/media/stars-1.87192ba7.svg'
image Background, url='https://codeparrot.ai/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fbg.9d37294b.png&w=3840&q=75'
image CodeParrot Logo, url='https://codeparrot.ai/logo.svg'
heading CodeParrot
heading Ship stunning UI Lightning Fast
image Y Combinator, url='https://codeparrot.ai/_next/static/media/backed-by-yc.248418cc.svg'
heading Resources
list
listitem
link Docs, url='https://codeparrot.ai/docs/quick-start'
listitem
link Changelog, url='https://marketplace.visualstudio.com/items/CodeParrot-ai.codeParrot/changelog'
heading Company
list
listitem
link Blog, url='https://codeparrot.ai/blogs'
listitem
link Contact, url='https://tidycal.com/royal1/codeparrot-contact-us'
heading Legal
list
listitem
link Privacy Policy, url='https://codeparrot.ai/docs/privacy-policy'
alert, atomic
StaticText About | CodeParrot | Design to Code Copilot
Reasoning for action: By clicking the About Us link, I am starting to gather essential information about CodeParrot, which is necessary for understanding how it can streamline frontend development processes. This step is crucial as it aligns with the user story of exploring the platform's capabilities, thereby helping in making an informed decision regarding its adoption for potential projects.
Action: click('55') # Click on the About Us link to explore more about the company.
Change Description: After clicking the 'About Us' link, the browser navigated from the main page of CodeParrot to the 'About' page, reflecting a change in URL to 'https://codeparrot.ai/about', and the content featured an introduction to the company and its creators, including their story and details about their mission.
Screenshot before:Screenshot after:---
Step 2:
Url (before/after):
https://codeparrot.ai/about
https://codeparrot.ai/docs/quick-start
Content (before/after):
RootWebArea About | CodeParrot | Design to Code Copilot, focused, url='https://codeparrot.ai/about'
main
[657] link logo, center=(356,41), url='https://codeparrot.ai/'
image logo, url='https://codeparrot.ai/logo.svg'
[659] link CodeParrot AI, center=(473,41), url='https://codeparrot.ai/'
Show more
navigation
[666] link About Us About Us link, center=(807,41), inner_text=About Us
About Us, url='https://codeparrot.ai/about'
StaticText About Us
StaticText About Us
image link, url='https://codeparrot.ai/_next/static/media/Link.cec83abc.svg'
[673] link How it Works How it Works, center=(931,41), inner_text=How it Works
How it Works, url='https://codeparrot.ai/docs/quick-start'
StaticText How it Works
StaticText How it Works
[678] link Pricing Pricing, center=(1046,41), inner_text=Pricing
Pricing, url='https://codeparrot.ai/pricing'
StaticText Pricing
StaticText Pricing
[683] link Blog Blog, center=(1130,41), inner_text=Blog
Blog, url='https://codeparrot.ai/blogs'
StaticText Blog
StaticText Blog
[689] link Start for Free Start for Free Stars Icon, center=(1491,41), inner_text=Start for Free
Start for Free, url='https://marketplace.visualstudio.com/items?itemName=CodeParrot-ai.codeParrot'
StaticText Start for Free
StaticText Start for Free
image Stars Icon, url='https://codeparrot.ai/_next/static/media/stars-2.f9c117b8.svg'
heading Build things you are proud of
image Image 2, url='https://codeparrot.ai/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FVedant.09950e19.jpg&w=256&q=75'
image Image 1, url='https://codeparrot.ai/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FRoyal.6702c7d2.jpeg&w=640&q=75'
paragraph
StaticText Built by 2 Software Engineers to raise the standards of Digital Experiences
image Stars, url='https://codeparrot.ai/_next/static/media/stars-bg.9e7736fd.svg'
heading Our Story
paragraph
StaticText I remember building a tic tac toe website in the first year of college. Required learning flexbox, css animations and many stack overflow searches. It’s been over 10 years of building web and mobile products, yet my last Chatgpt search was
StaticText “How to center a div”
paragraph
StaticText In that time frame, the number of apps on play store has increased from
StaticText 400k to 3.7 Million
StaticText . Most of them don’t even see hundreds of users. Why?
paragraph
StaticText Because Nobody likes using the second best product
paragraph
StaticText Think about the products you use everyday. Why don’t you use the cheaper alternatives out there? The bar of what a great product is, increases exponentially. It’s like Moore’s law of user experience. Building these delightful experiences is increasingly difficult and time prohibitive.
paragraph
StaticText We started CodeParrot with a singular goal:
paragraph
StaticText Help Developers build products they truly are proud of
image Duo, url='https://codeparrot.ai/_next/static/media/star-mask.8dfd1f49.svg'
heading Meet the duo
image Background Gradient, url='https://codeparrot.ai/_next/static/media/background-gradient.5f8da736.svg'
link X Logo, url='https://x.com/royaljain4'
image X Logo, url='https://codeparrot.ai/_next/static/media/x-logo.5f42625f.svg'
link LinkedIn Logo, url='https://www.linkedin.com/in/royal-jain/'
image LinkedIn Logo, url='https://codeparrot.ai/_next/static/media/linkedin-logo.0bd19d38.svg'
image Profile Picture, url='https://codeparrot.ai/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FRoyal.6702c7d2.jpeg&w=32&q=75'
StaticText Royal
StaticText Jain
StaticText <
link royal@codeparrot.ai, url='mailto:royal@codeparrot.ai'
StaticText >
heading Do more with less
paragraph
StaticText ”Adding manpower to a late software project makes it later”. Great products are not created by huge teams. It's a few scrappy individuals who love what they are building.
image Background Gradient, url='https://codeparrot.ai/_next/static/media/background-gradient.5f8da736.svg'
link X Logo, url='https://x.com/vedantsopinions'
image X Logo, url='https://codeparrot.ai/_next/static/media/x-logo.5f42625f.svg'
link LinkedIn Logo, url='https://www.linkedin.com/in/vedantsopinions/'
image LinkedIn Logo, url='https://codeparrot.ai/_next/static/media/linkedin-logo.0bd19d38.svg'
image Profile Picture, url='https://codeparrot.ai/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FVedant.09950e19.jpg&w=32&q=75'
StaticText Vedant
StaticText Agarwal
StaticText <
link vedant@codeparrot.ai, url='mailto:vedant@codeparrot.ai'
StaticText >
heading Your product reflects your personality
paragraph
StaticText Are you detail oriented? Do you value how people perceive you? As said by Alan Cooper, if you want people to use your software, you should design it to behave like a likeable person
image Code Icon, url='https://codeparrot.ai/_next/static/media/code.890d192c.svg'
StaticText Fasttrack Frontend
StaticText Development using CodeParrot AI
link Let’s get started Let’s get started Stars Icon, url='https://marketplace.visualstudio.com/items?itemName=CodeParrot-ai.codeParrot'
StaticText Let’s get started
StaticText Let’s get started
image Stars Icon, url='https://codeparrot.ai/_next/static/media/stars-1.87192ba7.svg'
image Background, url='https://codeparrot.ai/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fbg.9d37294b.png&w=3840&q=75'
image CodeParrot Logo, url='https://codeparrot.ai/logo.svg'
heading CodeParrot
heading Ship stunning UI Lightning Fast
image Y Combinator, url='https://codeparrot.ai/_next/static/media/backed-by-yc.248418cc.svg'
heading Resources
list
listitem
link Docs, url='https://codeparrot.ai/docs/quick-start'
listitem
link Changelog, url='https://marketplace.visualstudio.com/items/CodeParrot-ai.codeParrot/changelog'
heading Company
list
listitem
link Blog, url='https://codeparrot.ai/blogs'
listitem
link Contact, url='https://tidycal.com/royal1/codeparrot-contact-us'
heading Legal
list
listitem
link Privacy Policy, url='https://codeparrot.ai/docs/privacy-policy'
alert, atomic
StaticText About | CodeParrot | Design to Code Copilot
RootWebArea Quick Start, focused, url='https://codeparrot.ai/docs/quick-start'
banner
[47] link CodeParrot, center=(184,40), url='https://codeparrot.ai/'
image, url='https://codeparrot.ai/docs/assets/logo.svg'
StaticText Docs
Show more
navigation
list
image
[75] textbox {{ searchLabel }}, center=(1680,40), autocomplete=off, contenteditable=True, type=text
[76] button, center=(1786,40)
image
[79] button, center=(1826,40), expanded=False, hasPopup='menu'
button
image
complementary
[119] textbox Filter, center=(210,112), contenteditable=True, type=text
list
region scrollable content
[130] link Quick Start, center=(214,160), url='https://codeparrot.ai/docs/quick-start/'
image
[137] link Selecting Figma Components, center=(214,194), url='https://codeparrot.ai/docs/selecting-figma-component/'
image
[143] link Code generation settings, center=(200,226), url='https://codeparrot.ai/docs/code-generation-settings/'
image
[148] button, center=(329,226)
image
list
listitem
[153] link Using libraries, center=(222,260), url='https://codeparrot.ai/docs/code-generation-settings/using-libraries/'
image
listitem
[159] link Using custom components, center=(222,292), url='https://codeparrot.ai/docs/code-generation-settings/using-custom-components/'
image
listitem
[165] link Adding custom themes, center=(222,326), url='https://codeparrot.ai/docs/code-generation-settings/adding-custom-themes/'
image
[171] link Pricing, center=(214,358), url='https://codeparrot.ai/docs/pricing/'
image
[177] link FAQs, center=(214,392), url='https://codeparrot.ai/docs/faqs/'
image
[183] link Contact Us, center=(214,424), url='https://codeparrot.ai/docs/contact-us/'
image
[189] link Privacy Policy, center=(214,458), url='https://codeparrot.ai/docs/privacy-policy/'
image
[200] link Powered by, center=(210,1048), url='https://retype.com/'
image
main
heading # Quick Start
[213] link #, center=(408,129), url='https://codeparrot.ai/docs/quick-start#quick-start'
paragraph
StaticText Speed up UI Development using CodeParrot AI.
paragraph
figure
EmbeddedObject
paragraph
heading # Install VS code plugin
[223] link #, center=(408,911), url='https://codeparrot.ai/docs/quick-start#install-vs-code-plugin'
paragraph
StaticText Install CodeParrot plugin from
[226] link VS Code marketplace, center=(754,967), url='https://marketplace.visualstudio.com/items?itemName=CodeParrot-ai.codeParrot'
heading # Login
[229] link #, center=(408,1027), url='https://codeparrot.ai/docs/quick-start#login'
paragraph
StaticText You can login via
emphasis
StaticText Figma
StaticText or
emphasis
StaticText Github
StaticText . Logging In with Figma allows you to browse and select components from Figma files directly in Vscode
paragraph
figure
image Selecting components from Figma File, url='https://codeparrot.ai/docs/assets/login-screen.png'
Figcaption
StaticText Selecting components from Figma File
paragraph
heading # Build UI using Figma Designs
link #, url='https://codeparrot.ai/docs/quick-start#build-ui-using-figma-designs'
alert, atomic
image
paragraph
StaticText You need to login via Figma for this feature
paragraph
StaticText Click "Select fom Figma" button in CodeParrot Panel. Copy and submit this Figma Design
link sample link, url='https://www.figma.com/file/WgUpypS3kKQZ1QWGtKve1d/SampleLandingPage-(Community)?type=design&node-id=0-1&mode=design&t=KOomD4i6xuxzx9q8-0'
StaticText . This button is enabled only at the start of the chat session, start a new session for new design.
paragraph
figure
image Select fom Figma, url='https://codeparrot.ai/docs/assets/select-from-figma.png'
Figcaption
StaticText Select fom Figma
paragraph
paragraph
StaticText You would be able to see the preview of the component. See
link selecting components from Figma File, url='https://codeparrot.ai/docs/selecting-figma-component'
StaticText to add your own figma component
heading # Code Generation Settings
link #, url='https://codeparrot.ai/docs/quick-start#code-generation-settings'
paragraph
StaticText Click on the settings icon to choose the Framework.
paragraph
figure
image Edit Code Generation Settings, url='https://codeparrot.ai/docs/assets/edit-settings.png'
Figcaption
StaticText Edit Code Generation Settings
paragraph
paragraph
StaticText For now, just choose your framework like React / React Native / Flutter etc and language. Save the settings. Checkout
link Code Generation Settings, url='https://codeparrot.ai/docs/code-generation-settings'
StaticText later for details on how to generate better results using additional settings.
paragraph
figure
image Code Generation Settings, url='https://codeparrot.ai/docs/assets/code-generation-settings.png'
Figcaption
StaticText Code Generation Settings
paragraph
heading # Reuse Components
link #, url='https://codeparrot.ai/docs/quick-start#reuse-components'
paragraph
StaticText To reuse existing components or styling classes, write "Use Component Name" like "Use MUI table". For custom components or style files write "Use @filename"
paragraph
figure
image Reuse Components, url='https://codeparrot.ai/docs/assets/reuse-components.png'
Figcaption
StaticText Reuse Components
paragraph
heading # Generate Code
link #, url='https://codeparrot.ai/docs/quick-start#generate-code'
paragraph
StaticText You would be able to preview the component in CodeParrot Panel. Click on Send icon to start generating code.
paragraph
figure
image Preview, url='https://codeparrot.ai/docs/assets/preview.png'
Figcaption
StaticText Preview
paragraph
paragraph
StaticText Iterate over the code, by further prompting till your component is ready. Copy paste code to your project.
heading # Images and Vector Assets
link #, url='https://codeparrot.ai/docs/quick-start#images-and-vector-assets'
paragraph
StaticText Images and vector assets are not downloaded automatically. It points to a placeholder URL, based on your figma design. Don't forget to set it to the correct based on your code!
paragraph
figure
image Assets Download, url='https://codeparrot.ai/docs/assets/asset-code.png'
Figcaption
StaticText Assets Download
paragraph
heading # Large Figma Components
link #, url='https://codeparrot.ai/docs/quick-start#large-figma-components'
paragraph
StaticText Very large figma selections or screens with multiple folds will throw an error. Check
link selecting Figma components, url='https://codeparrot.ai/docs/selecting-figma-component'
StaticText for more.
navigation
link Next Selecting Figma Components, url='https://codeparrot.ai/docs/selecting-figma-component/'
image
contentinfo
list
paragraph
StaticText © Copyright 2024. All rights reserved.
region scrollable content
StaticText Contents
list
listitem
[353] link Install VS code plugin, center=(1732,156), url='https://codeparrot.ai/docs/quick-start#install-vs-code-plugin'
listitem
[356] link Login, center=(1732,184), url='https://codeparrot.ai/docs/quick-start#login'
listitem
[359] link Build UI using Figma Designs, center=(1732,214), url='https://codeparrot.ai/docs/quick-start#build-ui-using-figma-designs'
listitem
[362] link Code Generation Settings, center=(1732,242), url='https://codeparrot.ai/docs/quick-start#code-generation-settings'
listitem
[365] link Reuse Components, center=(1732,272), url='https://codeparrot.ai/docs/quick-start#reuse-components'
listitem
[368] link Generate Code, center=(1732,300), url='https://codeparrot.ai/docs/quick-start#generate-code'
listitem
[371] link Images and Vector Assets, center=(1732,330), url='https://codeparrot.ai/docs/quick-start#images-and-vector-assets'
listitem
[374] link Large Figma Components, center=(1732,358), url='https://codeparrot.ai/docs/quick-start#large-figma-components'
image
textbox {{ searchLabel }}
button
image
Reasoning for action: I clicked the 'How it Works' link (identified by its ID '673') because this section is crucial for understanding how CodeParrot can assist in streamlining frontend development processes. By doing this, I move closer to meeting the user's goal of determining the benefits of the platform for their projects. The acceptance criteria specifically mention needing detailed explanations of the functionalities, and accessing this link is the first step towards achieving that.
Action: click('673') # Click on the How it Works link to learn more about the functionality of CodeParrot.
Change Description: After clicking the 'How it Works' link, the browser navigated to the 'Quick Start' documentation page for CodeParrot, replacing the initial 'About' page. The content now includes instructions on using the CodeParrot AI functionality, such as installing the VS Code plugin and building UI using Figma designs.
Screenshot before:Screenshot after:---
Step 3:
Url (before/after):
https://codeparrot.ai/docs/quick-start
https://codeparrot.ai/docs/quick-start#install-vs-code-plugin
Content (before/after):
RootWebArea Quick Start, focused, url='https://codeparrot.ai/docs/quick-start'
banner
[47] link CodeParrot, center=(184,40), url='https://codeparrot.ai/'
image, url='https://codeparrot.ai/docs/assets/logo.svg'
StaticText Docs
Show more
navigation
list
image
[75] textbox {{ searchLabel }}, center=(1680,40), autocomplete=off, contenteditable=True, type=text
[76] button, center=(1786,40)
image
[79] button, center=(1826,40), expanded=False, hasPopup='menu'
button
image
complementary
[119] textbox Filter, center=(210,112), contenteditable=True, type=text
list
region scrollable content
[130] link Quick Start, center=(214,160), url='https://codeparrot.ai/docs/quick-start/'
image
[137] link Selecting Figma Components, center=(214,194), url='https://codeparrot.ai/docs/selecting-figma-component/'
image
[143] link Code generation settings, center=(200,226), url='https://codeparrot.ai/docs/code-generation-settings/'
image
[148] button, center=(329,226)
image
list
listitem
[153] link Using libraries, center=(222,260), url='https://codeparrot.ai/docs/code-generation-settings/using-libraries/'
image
listitem
[159] link Using custom components, center=(222,292), url='https://codeparrot.ai/docs/code-generation-settings/using-custom-components/'
image
listitem
[165] link Adding custom themes, center=(222,326), url='https://codeparrot.ai/docs/code-generation-settings/adding-custom-themes/'
image
[171] link Pricing, center=(214,358), url='https://codeparrot.ai/docs/pricing/'
image
[177] link FAQs, center=(214,392), url='https://codeparrot.ai/docs/faqs/'
image
[183] link Contact Us, center=(214,424), url='https://codeparrot.ai/docs/contact-us/'
image
[189] link Privacy Policy, center=(214,458), url='https://codeparrot.ai/docs/privacy-policy/'
image
[200] link Powered by, center=(210,1048), url='https://retype.com/'
image
main
heading # Quick Start
[213] link #, center=(408,129), url='https://codeparrot.ai/docs/quick-start#quick-start'
paragraph
StaticText Speed up UI Development using CodeParrot AI.
paragraph
figure
EmbeddedObject
paragraph
heading # Install VS code plugin
[223] link #, center=(408,911), url='https://codeparrot.ai/docs/quick-start#install-vs-code-plugin'
paragraph
StaticText Install CodeParrot plugin from
[226] link VS Code marketplace, center=(754,967), url='https://marketplace.visualstudio.com/items?itemName=CodeParrot-ai.codeParrot'
heading # Login
[229] link #, center=(408,1027), url='https://codeparrot.ai/docs/quick-start#login'
paragraph
StaticText You can login via
emphasis
StaticText Figma
StaticText or
emphasis
StaticText Github
StaticText . Logging In with Figma allows you to browse and select components from Figma files directly in Vscode
paragraph
figure
image Selecting components from Figma File, url='https://codeparrot.ai/docs/assets/login-screen.png'
Figcaption
StaticText Selecting components from Figma File
paragraph
heading # Build UI using Figma Designs
link #, url='https://codeparrot.ai/docs/quick-start#build-ui-using-figma-designs'
alert, atomic
image
paragraph
StaticText You need to login via Figma for this feature
paragraph
StaticText Click "Select fom Figma" button in CodeParrot Panel. Copy and submit this Figma Design
link sample link, url='https://www.figma.com/file/WgUpypS3kKQZ1QWGtKve1d/SampleLandingPage-(Community)?type=design&node-id=0-1&mode=design&t=KOomD4i6xuxzx9q8-0'
StaticText . This button is enabled only at the start of the chat session, start a new session for new design.
paragraph
figure
image Select fom Figma, url='https://codeparrot.ai/docs/assets/select-from-figma.png'
Figcaption
StaticText Select fom Figma
paragraph
paragraph
StaticText You would be able to see the preview of the component. See
link selecting components from Figma File, url='https://codeparrot.ai/docs/selecting-figma-component'
StaticText to add your own figma component
heading # Code Generation Settings
link #, url='https://codeparrot.ai/docs/quick-start#code-generation-settings'
paragraph
StaticText Click on the settings icon to choose the Framework.
paragraph
figure
image Edit Code Generation Settings, url='https://codeparrot.ai/docs/assets/edit-settings.png'
Figcaption
StaticText Edit Code Generation Settings
paragraph
paragraph
StaticText For now, just choose your framework like React / React Native / Flutter etc and language. Save the settings. Checkout
link Code Generation Settings, url='https://codeparrot.ai/docs/code-generation-settings'
StaticText later for details on how to generate better results using additional settings.
paragraph
figure
image Code Generation Settings, url='https://codeparrot.ai/docs/assets/code-generation-settings.png'
Figcaption
StaticText Code Generation Settings
paragraph
heading # Reuse Components
link #, url='https://codeparrot.ai/docs/quick-start#reuse-components'
paragraph
StaticText To reuse existing components or styling classes, write "Use Component Name" like "Use MUI table". For custom components or style files write "Use @filename"
paragraph
figure
image Reuse Components, url='https://codeparrot.ai/docs/assets/reuse-components.png'
Figcaption
StaticText Reuse Components
paragraph
heading # Generate Code
link #, url='https://codeparrot.ai/docs/quick-start#generate-code'
paragraph
StaticText You would be able to preview the component in CodeParrot Panel. Click on Send icon to start generating code.
paragraph
figure
image Preview, url='https://codeparrot.ai/docs/assets/preview.png'
Figcaption
StaticText Preview
paragraph
paragraph
StaticText Iterate over the code, by further prompting till your component is ready. Copy paste code to your project.
heading # Images and Vector Assets
link #, url='https://codeparrot.ai/docs/quick-start#images-and-vector-assets'
paragraph
StaticText Images and vector assets are not downloaded automatically. It points to a placeholder URL, based on your figma design. Don't forget to set it to the correct based on your code!
paragraph
figure
image Assets Download, url='https://codeparrot.ai/docs/assets/asset-code.png'
Figcaption
StaticText Assets Download
paragraph
heading # Large Figma Components
link #, url='https://codeparrot.ai/docs/quick-start#large-figma-components'
paragraph
StaticText Very large figma selections or screens with multiple folds will throw an error. Check
link selecting Figma components, url='https://codeparrot.ai/docs/selecting-figma-component'
StaticText for more.
navigation
link Next Selecting Figma Components, url='https://codeparrot.ai/docs/selecting-figma-component/'
image
contentinfo
list
paragraph
StaticText © Copyright 2024. All rights reserved.
region scrollable content
StaticText Contents
list
listitem
[353] link Install VS code plugin, center=(1732,156), url='https://codeparrot.ai/docs/quick-start#install-vs-code-plugin'
listitem
[356] link Login, center=(1732,184), url='https://codeparrot.ai/docs/quick-start#login'
listitem
[359] link Build UI using Figma Designs, center=(1732,214), url='https://codeparrot.ai/docs/quick-start#build-ui-using-figma-designs'
listitem
[362] link Code Generation Settings, center=(1732,242), url='https://codeparrot.ai/docs/quick-start#code-generation-settings'
listitem
[365] link Reuse Components, center=(1732,272), url='https://codeparrot.ai/docs/quick-start#reuse-components'
listitem
[368] link Generate Code, center=(1732,300), url='https://codeparrot.ai/docs/quick-start#generate-code'
listitem
[371] link Images and Vector Assets, center=(1732,330), url='https://codeparrot.ai/docs/quick-start#images-and-vector-assets'
listitem
[374] link Large Figma Components, center=(1732,358), url='https://codeparrot.ai/docs/quick-start#large-figma-components'
image
textbox {{ searchLabel }}
button
image
RootWebArea Quick Start, focused, url='https://codeparrot.ai/docs/quick-start#install-vs-code-plugin'
banner
[47] link CodeParrot, center=(184,828), url='https://codeparrot.ai/'
image, url='https://codeparrot.ai/docs/assets/logo.svg'
StaticText Docs
Show more
navigation
list
image
[75] textbox {{ searchLabel }}, center=(1680,828), autocomplete=off, contenteditable=True, type=text
[76] button, center=(1786,828)
image
[79] button, center=(1826,828), expanded=False, hasPopup='menu'
button
image
complementary
[119] textbox Filter, center=(210,900), contenteditable=True, type=text
list
region scrollable content
[130] link Quick Start, center=(214,948), url='https://codeparrot.ai/docs/quick-start/'
image
[137] link Selecting Figma Components, center=(214,982), url='https://codeparrot.ai/docs/selecting-figma-component/'
image
[143] link Code generation settings, center=(200,1014), url='https://codeparrot.ai/docs/code-generation-settings/'
image
[148] button, center=(329,1014)
image
list
listitem
[153] link Using libraries, center=(222,1048), url='https://codeparrot.ai/docs/code-generation-settings/using-libraries/'
image
listitem
[159] link Using custom components, center=(222,1080), url='https://codeparrot.ai/docs/code-generation-settings/using-custom-components/'
image
listitem
[165] link Adding custom themes, center=(222,1114), url='https://codeparrot.ai/docs/code-generation-settings/adding-custom-themes/'
image
[171] link Pricing, center=(214,1146), url='https://codeparrot.ai/docs/pricing/'
image
[177] link FAQs, center=(214,1180), url='https://codeparrot.ai/docs/faqs/'
image
[183] link Contact Us, center=(214,1212), url='https://codeparrot.ai/docs/contact-us/'
image
[189] link Privacy Policy, center=(214,1246), url='https://codeparrot.ai/docs/privacy-policy/'
image
[200] link Powered by, center=(210,1836), url='https://retype.com/'
image
main
heading # Quick Start
link #, url='https://codeparrot.ai/docs/quick-start#quick-start'
paragraph
StaticText Speed up UI Development using CodeParrot AI.
paragraph
figure
EmbeddedObject
paragraph
heading # Install VS code plugin
[223] link #, center=(408,911), url='https://codeparrot.ai/docs/quick-start#install-vs-code-plugin'
paragraph
StaticText Install CodeParrot plugin from
[226] link VS Code marketplace, center=(754,967), url='https://marketplace.visualstudio.com/items?itemName=CodeParrot-ai.codeParrot'
heading # Login
[229] link #, center=(408,1027), url='https://codeparrot.ai/docs/quick-start#login'
paragraph
StaticText You can login via
emphasis
StaticText Figma
StaticText or
emphasis
StaticText Github
StaticText . Logging In with Figma allows you to browse and select components from Figma files directly in Vscode
paragraph
figure
image Selecting components from Figma File, url='https://codeparrot.ai/docs/assets/login-screen.png'
Figcaption
StaticText Selecting components from Figma File
paragraph
heading # Build UI using Figma Designs
[241] link #, center=(408,1786), url='https://codeparrot.ai/docs/quick-start#build-ui-using-figma-designs'
alert, atomic
image
paragraph
StaticText You need to login via Figma for this feature
paragraph
StaticText Click "Select fom Figma" button in CodeParrot Panel. Copy and submit this Figma Design
link sample link, url='https://www.figma.com/file/WgUpypS3kKQZ1QWGtKve1d/SampleLandingPage-(Community)?type=design&node-id=0-1&mode=design&t=KOomD4i6xuxzx9q8-0'
StaticText . This button is enabled only at the start of the chat session, start a new session for new design.
paragraph
figure
image Select fom Figma, url='https://codeparrot.ai/docs/assets/select-from-figma.png'
Figcaption
StaticText Select fom Figma
paragraph
paragraph
StaticText You would be able to see the preview of the component. See
link selecting components from Figma File, url='https://codeparrot.ai/docs/selecting-figma-component'
StaticText to add your own figma component
heading # Code Generation Settings
link #, url='https://codeparrot.ai/docs/quick-start#code-generation-settings'
paragraph
StaticText Click on the settings icon to choose the Framework.
paragraph
figure
image Edit Code Generation Settings, url='https://codeparrot.ai/docs/assets/edit-settings.png'
Figcaption
StaticText Edit Code Generation Settings
paragraph
paragraph
StaticText For now, just choose your framework like React / React Native / Flutter etc and language. Save the settings. Checkout
link Code Generation Settings, url='https://codeparrot.ai/docs/code-generation-settings'
StaticText later for details on how to generate better results using additional settings.
paragraph
figure
image Code Generation Settings, url='https://codeparrot.ai/docs/assets/code-generation-settings.png'
Figcaption
StaticText Code Generation Settings
paragraph
heading # Reuse Components
link #, url='https://codeparrot.ai/docs/quick-start#reuse-components'
paragraph
StaticText To reuse existing components or styling classes, write "Use Component Name" like "Use MUI table". For custom components or style files write "Use @filename"
paragraph
figure
image Reuse Components, url='https://codeparrot.ai/docs/assets/reuse-components.png'
Figcaption
StaticText Reuse Components
paragraph
heading # Generate Code
link #, url='https://codeparrot.ai/docs/quick-start#generate-code'
paragraph
StaticText You would be able to preview the component in CodeParrot Panel. Click on Send icon to start generating code.
paragraph
figure
image Preview, url='https://codeparrot.ai/docs/assets/preview.png'
Figcaption
StaticText Preview
paragraph
paragraph
StaticText Iterate over the code, by further prompting till your component is ready. Copy paste code to your project.
heading # Images and Vector Assets
link #, url='https://codeparrot.ai/docs/quick-start#images-and-vector-assets'
paragraph
StaticText Images and vector assets are not downloaded automatically. It points to a placeholder URL, based on your figma design. Don't forget to set it to the correct based on your code!
paragraph
figure
image Assets Download, url='https://codeparrot.ai/docs/assets/asset-code.png'
Figcaption
StaticText Assets Download
paragraph
heading # Large Figma Components
link #, url='https://codeparrot.ai/docs/quick-start#large-figma-components'
paragraph
StaticText Very large figma selections or screens with multiple folds will throw an error. Check
link selecting Figma components, url='https://codeparrot.ai/docs/selecting-figma-component'
StaticText for more.
navigation
link Next Selecting Figma Components, url='https://codeparrot.ai/docs/selecting-figma-component/'
image
contentinfo
list
paragraph
StaticText © Copyright 2024. All rights reserved.
region scrollable content
StaticText Contents
list
listitem
[353] link Install VS code plugin, center=(1732,944), url='https://codeparrot.ai/docs/quick-start#install-vs-code-plugin'
listitem
[356] link Login, center=(1732,972), url='https://codeparrot.ai/docs/quick-start#login'
listitem
[359] link Build UI using Figma Designs, center=(1732,1002), url='https://codeparrot.ai/docs/quick-start#build-ui-using-figma-designs'
listitem
[362] link Code Generation Settings, center=(1732,1030), url='https://codeparrot.ai/docs/quick-start#code-generation-settings'
listitem
[365] link Reuse Components, center=(1732,1060), url='https://codeparrot.ai/docs/quick-start#reuse-components'
listitem
[368] link Generate Code, center=(1732,1088), url='https://codeparrot.ai/docs/quick-start#generate-code'
listitem
[371] link Images and Vector Assets, center=(1732,1118), url='https://codeparrot.ai/docs/quick-start#images-and-vector-assets'
listitem
[374] link Large Figma Components, center=(1732,1146), url='https://codeparrot.ai/docs/quick-start#large-figma-components'
image
textbox {{ searchLabel }}
button
image
[397] button, center=(1872,1820)
image
Reasoning for action: I clicked on the link for the 'Install VS Code plugin' because it is essential for potential users to understand how to get started with CodeParrot. By reading the installation instructions, I can gather necessary information that might help clarify the initial steps to use the platform effectively, which is crucial for someone deciding whether to adopt the tool for their projects.
Action: click('223') # Click on the Install VS Code plugin link to learn how to install the plugin.
Change Description: After clicking the 'Install VS Code plugin' link, the browser navigated to the section detailing how to install the CodeParrot plugin, with the page URL updated to include the '#install-vs-code-plugin' fragment. The main content area now prominently features instructions for installing the plugin along with associated links and headings.
Screenshot before:Screenshot after:---