Работа с ChatGPT
Интегрируя GPT в процесс разработки приложений, дизайнеры и разработчики могут работать быстрее и эффективнее, чем когда-либо прежде. Возможности обработки естественного языка GPT также означают, что он может помочь с пользовательским тестированием и обратной связью, позволяя дизайнерам быстро и легко совершенствовать свои проекты на основе пользовательского ввода.
Начальные подсказки
Во-первых, важно определить области знаний и ваши цели для разработки приложений. На основе демонстрации от OpenAI вы можете установить требования для вашего проекта.
Промпт:
You are an Al programming assistant.
- Follow the user's requirements carefully & to the letter.
- First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail
- Then output the code in a single codeblock
- Minimize any other prose
Для начинающих
Укажите области знаний, необходимые в вашем проекте, и ваш стиль кодирования. Давайте начнем с удобной для начинающих стартовой подсказки для iOS.
iOS является самой простой, так как все, что вам нужно, это Xcode, и все доступно с самого начала. Нет необходимости в сторонних библиотеках, особенно для начинающих.
Промпт:
You’re an expert in iOS dev, SwiftUI, iOS architecture and a robust architecture with the best practices.
- Provide steps to create a new project in Xcode.
Веб проекты
Веб-проекты более открыты и полагаются на множество сервисов и фреймворков. Вы столкнетесь с десятками вариантов, но давайте начнем с популярного: React и CodeSandbox. Это один из самых простых способов начать.
Промпт:
You're a web developer that specializes in React and CSS.
- For CSS, use Styled-Components.
- Use CodeSandbox to quickly build prototypes.
- Provide steps to create a new project in CodeSandbox.
- Provide steps to install third party libraries that we need.
- Create everything inside App.js
От простого к сложному
Приступая к работе с GPT, лучше всего сначала избегать создания сложных проектов. ИИ может быть медленным и приостанавливаться случайным образом из-за его ограничения в количестве токенов на пост. Чтобы избежать разочарования, рекомендуется не запрашивать слишком много информации сразу и добавлять детали постепенно. Например, если вы просите о шагах, лучше подождать следующего поста, чтобы спросить о концепции.
Промпт:
Create a card with cover image, title, divider, subtitle, text, author (avatar + name).
Полный стек
Большинство полноценных веб-проектов требуют собственного кастомизированного стека. Популярным сегодня является React with Next.js и Vercel.
Промпт:
You're a seasoned web developer that specializes in React, Next.js, Vercel and CSS.
- For content, use Contentful and GraphQL.
- For Authentification use Firebase and Firestore.
- We will need the Vimeo API to serve videos.
- Use Dropbox to get downloabable files for our paid customers.
Стиль кода
Выходные данные кода часто слишком медленны для написания и слишком длинны для одной записи. Лучше всего разделить его на несколько файлов и компонентов. Это требует большей организации, но ориентировано на будущее.
Промпт:
- Make your code as short, easy to understand and concise as possible.
- Only focus on code that is new or that are changing during new requests.
- Split into components and small files that are no longer than 100 lines of code.
Пользовательский опыт
Никогда не помешает изучить возможности сделать проект устойчивым, понимая, какие функции важны и какие функции могут быть полезны для премиум-пользователей.
Промпт:
- Develop apps that are beautifully designed with a great user experience
- Think like an entrepreneur and give advice on new features and how we could monetize this app.
Концепция и развитие
В начале проекта лучше всего сохранить ясную и простую концепцию, которая может быть достигнута за один промпт. Будьте бдительны и внимательны.
Промпты:
- Build a SwiftUI chat app that talks to a trainable AI.
- I want a nice vector pattern like in the Apple Card hologram that animates on tap in SwiftUI.
- Create a fun iOS app in SwiftUI that does colour matching. There will be two big circles next to each other and you can swipe vertically on it to change the brightness, horizontally to change the hue. Tolerance level for accepted answer should be not too hard at first and gradually harder. There should be a timer, and you have 10 secs to answer. There should be a button to submit answer below.
- Create a blur card that emits particles only when it moves. Can you add a drag gesture that responds in a physics way, with the circles following the drag but also lagging a little bit like in real life with inertia, like hair moving and slower strands catching up.
Ошибки и отладка
Ваш код не всегда будет работать. Иногда вам нужно спросить несколько раз. При возникновении ошибок не стесняйтесь вставлять сообщения об ошибках и указывать конкретный номер строки или имена элементов, которые являются ошибочными.
Пример ввода ошибки:
{paste error message}
{error at line #}
{describe user experience issue}
Обновление кода
Когда вы имеете дело с большим количеством кода, ответы от GPT будут медленными, повторяющимися и висят в случайных местах. Чтобы улучшить взаимодействие, попросите показывать только тот код, который изменяется. Кроме того, ИИ, как правило, забывает о вашем коде, поэтому рекомендуется регулярно вставлять весь код, чтобы поддерживать его в актуальном состоянии.
Промпт:
{Paste code}
{Ask change}
Focus only on code that changes
Если код продолжает висеть, вы можете попросить продолжить из определенных мест.
Промпт:
Continue from {step # or "text from response"}
Копирайтинг
GPT имеет потенциал для разработки страниц продуктов, создавая творческий и привлекательный контент для описаний продуктов, заголовков и изображений. Он также может генерировать персонализированные рекомендации по продуктам на основе предпочтений пользователей, истории поиска и поведения. Это может улучшить общий опыт работы с клиентами и привести к увеличению продаж для бизнеса.
Промпт:
You are a thoughtful, helpful and expert copywriter for web and mobile apps.
- All your writing should be limited to a paragraph with a max of 3 sentences.
- Write in a simple way that anyone can understand.
- Be as concise as possible. Less is better.
- Write in Markdown format with providing links to products mentioned.
MidJourney. Дизайн пользовательского интерфейса.
Чтобы создать дизайн пользовательского интерфейса с помощью Midjourney или других инструментов ИИ, напишите конкретное приглашение, используя короткие фразы, разделенные запятыми, чтобы создать токенизированный формат. Имейте в виду, что результаты требуют уточнения от дизайнеров-людей, но могут служить визуальным вдохновением на ранних этапах проектирования.
Промпт:
futurist minimal hd 8k Ux ui mobile interface , chatbot artificial intelligence, artistic, AI, beautiful modern mobile application with robot and high tech
Изображения в качестве вдохновения
Чтобы улучшить качество результатов на Midjourney, вы можете загружать изображения в Discord, копировать ссылки и включать их как часть вашего приглашения. Это может помочь обеспечить дополнительный контекст и специфику для ИИ для получения более точных ответов.
Промпт:
https://s.mj.run/pDPFu_y3uaA https://s.mj.run/RlfRSJ2n2N4 https://s.mj.run/aExVb_eksaM Futuristic smart house mobile application user interface design ios clean, clear, airy, light, simple, front view
ЗНАЧОК ПРИЛОЖЕНИЯ В MIDJOURNEY
Чтобы создать значок приложения с помощью Midjourney, начните с написания четкого и конкретного приглашения, описывающего тип значка, который вы хотите видеть. Если мы обнаружим, что начальный набор не соответствует нашему желаемому стилю, мы можем изменить приглашение, включив в него ключевые слова, такие как «минимализм» или «плоский дизайн», чтобы сигнализировать инструменту ИИ, какой значок мы ищем.
Промпт:
Design a 1024×1024 square iOS app icon featuring a majestic camera, using a flat design style similar to the icons in the iOS 14 app store
Обои
Midjourney искусен в производстве потрясающих обоев в различных стилях. Вот несколько впечатляющих примеров.
Промпты:
1. digital background, gradient, soft light, low contrast, minimalist, foil holographic --ar 3:2 --v 5 --stop 75
2. Colorful, light, transparent, and smooth silk background, beautiful, transparent, transparent, and translucent. --ar 16:9 --iw 0.5 --s 1000 --v 5
Веб фоны
Большие фоны являются важным компонентом дизайна веб-сайта, дополняя типографику и контент. Их можно использовать для создания визуально привлекательных эффектов параллакса и вдохновлять цветовую схему для остальной части макета.
Промпт:
intricate landscape wallpaper with vibrant night colors in the style of Firewatch video game art, san francisco bridge from above --ar 3:2 --v 4
Если тебе понравилась статья, продвигай ее и я рассмотрю создание приложения от и до. В комментариях напишите, какое приложение вы бы хотели видеть. Просьба расписывать идею (приложение) максимально подробно, а также не писать абсурд по типу "сделай приложение, которое будет взламывать какую нибудь вещь", желательно делать упор на пользу для людей. У меня есть пару идей, но ваши варианты мне тоже интересны. Так что велком в комменты.
Моя телега про нейросети - https://t.me/neuralnexus1 . Там инфы гораздо больше чем здесь. Также вы найдете там интересные промпты для нейросетей и различные обсуждения. Именно там и будут все исходники вместе с кодом к приложению.
